更新Knockoutjs可觀察數組項

Question

單擊附加到該對象的可保存/編輯按鈕時，如何更新可觀察數組“員工”中的“員工”數組項目？

我正在探索的一種可能性是將當前雇員/項目的索引傳遞給KO的“ editEmployee”函數中使用的“替換”方法-我已經開始在這里查看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);