Updating a Knockoutjs observable array item

Question

How do I update an "employee" array item in the observable array "employees" when the save/edit button attached to that item is clicked?

One possibility I'm exploring is passing the index of the current employee/item to KO's "replace" method used in the "editEmployee" function - which i've started to look at here http://jsfiddle.net/72T8h/

I also need to prevent the current item values (in edit mode) from updating in the observable array when the "cancel" button is clicked or another employee is added or deleted)

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

your cancelUpdate has to be like this:

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

working fiddle: http://jsfiddle.net/TWk4j/

Answer 2

I have changed some code

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>

and JS file

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