kickout.js observablearray推送未绑定单击

Question

I have some html as follows:

<table id="table">
    <thead>
        <tr>
            <th>Employee ID</th>
            <th>Name</th>
            <th>Role</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Employees">        
        <tr>
            <td data-bind="text: Empid"></td>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Role"></td>
            <td>
                <a data-bind="click: editEmployee">Edit</a>
            </td>
        </tr>            

    </tbody>
</table>

<div id="createForm">
    <input id="empidC" />
    <input id="nameC" />
    <input id="roleC" />
    <button type="button" id="insertEmployee">Create</button>
</div>

And I have a javascript file containing knockout code:

    $('#insertEmployee').click(function () {

        var empidC = $("#empidC").val(),
            nameC = $("#nameC").val(),
            roleC = $("#roleC").val();

        $.ajax({
            type: "POST",
            url: "/Employees/Create",
            data: JSON.stringify({ "Empid": empidC, "Name": nameC, "Role": roleC }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

                // Data gets inserted in DB and alert statement is executing
                alert(msg);              

                eList.Employees.push({
                    Empid:empidC,
                    Name:nameC,
                    Role:roleC
                });

            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });

    });

    var getEmployees=function(){
        return $.get("/Employees/FetchEmployees");
    }

    //View Model for all Employees
    var EmployeeListVM = function () {
        var self = this;

        self.Employees = ko.observableArray();         

        getEmployees().done(function (data) {
            var emp = data.map(function (e) {
                return (new Employees(e));
            });
            self.Employees(emp);
        });

    };

    //Model for all Employees
    function Employees(data) {

        var self = this;

        this.Empid = ko.observable(data.Empid);
        this.Name = ko.observable(data.Name);
        this.Role = ko.observable(data.Role);

        this.editEmployee = function (record) {

            var eEdit = new SingleEmployee(record);

            var cont = document.getElementById("editForm");
            ko.cleanNode(cont);
            ko.applyBindings(eEdit, cont);

            $("#editForm").dialog({
                autoOpen: false,
                modal: true,
                width: 450,
                title: "Edit Selected Record(s)"                
            });

            $("#editForm").dialog("open");           

        };

    }

    // Viewmodel for editing single record
    function SingleEmployee(data) {

        var self = this;
        this.Empid = ko.observable(data.Empid);
        this.Name = ko.observable(data.Name);
        this.Role = ko.observable(data.Role);
    };

    var eList = new EmployeeListVM();
    ko.applyBindings(eList, document.getElementById("table"));

When I insert any new record in div "createForm", I get an error:

Uncaught ReferenceError: Unable to process binding "click: function (){return editEmployee }" Message: editEmployee is not defined

The new row is getting displayed, but the Edit link for that newly inserted record does not work

EDIT:

I solved the problem. The problem was that "Object" was getting passed to Employees(data) and not "Employees". So in the insertEmployee click, I changed code to:

            var newEmp = new Employees({
                Empid: empidC,
                Name: nameC,
                Role: roleC
            });

            eList.Employees.push(newEmp);

Answer 1

Is the data actually getting to your server side controller and updating the DB? The ajax call to post data and call the Create method on the server, in the Success section assumes that all is ok on the server. All the success path does here is to say that the client side call was ok, It's not a server success. Where you currently have your alert statement, you need to ensure that the server side actually posted the data before attempting to retrieve it later in the refresh of the page.