正在更新Knockoutjs可观察数组项

Updating a Knockoutjs observable array item

本文关键字：观察 数组 Knockoutjs 更新      更新时间：2024-01-16

单击附加到可观察数组"employees"中的保存/编辑按钮时，如何更新该数组项？

我正在探索的一种可能性是将当前员工/项目的索引传递给KO在"editEmployee"函数中使用的"replace"方法——我已经开始在这里研究了http://jsfiddle.net/72T8h/

当点击"取消"按钮或添加或删除另一名员工时，我还需要防止当前项目值（在编辑模式下）在可观察数组中更新

function Employee() {
    var self = this;
    this.firstName = "";
    this.lastName = "";
    this.fundName = "";
    //Toggle editability
    this.editable = ko.observable(true);
    // Employee summary of details
    this.removeEmployee = function (employee) {
        vm.removeEmployee(this);
    };
//      this.cancelUpdate = function () {
//          this.editable(!this.editable());
//      };
    this.editEmployee = function (employee) {
        this.editable(!this.editable());
        vm.editEmployee(this);
    };
}

function EmployeesViewModel() {
    var self = this;
    self.employees = ko.observableArray([]);
    self.removeEmployee = function (employee) {
        self.employees.remove(employee);
    };
    self.addEmployee = function () {
        self.employees.push(new Employee());
    };
    self.editEmployee = function(employee){
        //*** REPLACE ITEM IN ARRAY HERE ***
        self.employees.replace(self.employees()[self.index()],employee);
    };
}
var vm = new EmployeesViewModel();
ko.applyBindings(vm);

您的cancelUpdate必须是这样的：

this.cancelUpdate = function () {
    vm.removeEmployee(this);
};

工作小提琴：http://jsfiddle.net/TWk4j/

我更改了一些代码

HTML

<script type="text/html" id="viewing-template">
  <p><b>Name</b>
      <span style="float: right" ><span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span></span>
  </p>
  <p><b>Fund name</b>
  <span style="float: right"><span data-bind="text: fundName"></span>
  </p>
</script>
<script type="text/html" id="editing-template">
  First name: <br />
    <input data-bind="value: firstName" type="text"/>  <span data-bind="text: firstName"></span><br />
  Last name: <br />
  <input data-bind="value: lastName" type="text"/>  <span data-bind="text: lastName"></span><br />
  Fund name: <br />
  <input data-bind="value: fundName" type="text"/>  <span data-bind="text: fundName"></span><br />
</script>
<!-- Main -->
<article class="content">
     <h1>
        Employee details</h1>
    <div class="employees" data-bind="foreach: { data: employees }">
        <!-- Individual -->
        <div class="employee-summary">
             <h3>
                Employee details</h3>
            <fieldset>
                <!-- ko if: editable -->
                <div class="employee" data-bind="template: {name: 'editing-template',  data: $data }"></div>
                <!-- /ko -->
                <!-- ko ifnot: editable -->
                <div class="employee" data-bind="template: {name: 'viewing-template', data: $data }"></div>
                <!-- /ko -->
                <br />
                <div style="float: right; display: inline;">
                    <!-- ko ifnot: editable -->
                    <button data-bind='click: removeEmployee'>Delete</button>
                    <!-- /ko --> <span data-bind="if: editable()">
                        <button data-bind='click: removeEmployee'>
                            Cancel</button></span>
                    <button data-bind='click: editEmployee'> <span data-bind="ifnot: editable()">Edit</span>  <span data-bind="if: editable()">Save</span>
                    </button>
                </div>
                <br />
                <br class="clear" />
            </fieldset>
        </div>
        <!-- End individual -->
        <br />
        <!-- End employees -->
    </div>
    <div style="clear: left">
        <div style="float: right">
            <button data-bind='click: addEmployee'>Add employee</button>
        </div>
    </div>
</article>
<br />
<br />
<span data-bind="text: ko.toJSON(vm.employees())"></span>

和JS文件

function Employee() {
        var self = this;
        self.firstName = "";
        self.lastName = "";
        self.fundName = "";
        //Toggle editability
        self.editable = ko.observable(true);
        // Employee summary of details
        self.removeEmployee = function (employee) {
            vm.removeEmployee(this);
        };
        self.cancelUpdate = function () {
            self.editable(!this.editable());
        };
        self.editEmployee = function (employee) {
            self.editable(!this.editable());
            //vm.editEmployee(this);
        };
    }

    function EmployeesViewModel() {
        var self = this;
        self.employees = ko.observableArray([]);
        self.removeEmployee = function (employee) {
            self.employees.remove(employee);
        };
        self.addEmployee = function () {
            self.employees.push(new Employee());
        };
    }
    var vm = new EmployeesViewModel();
    ko.applyBindings(vm);
相关文章：