更新 Knockoutjs 可观察数组项

Question

当单击附加到该项目的保存/编辑按钮时，如何更新可观察数组“员工”中的“员工”数组项目？

我正在探索的一种可能性是将当前员工/项目的索引传递给“editEmployee”函数中使用的 KO 的“替换”方法 - 我已经开始在此处查看 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);

Answer 1

您的 cancelUpdate 必须是这样的：

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

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

Answer 2

我修改了一些代码

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);