Question

我有一些html如下：

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

我有一个包含淘汰代码的javascript文件：

    $('#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"));

当我在div“createForm”中插入任何新记录时，出现错误：

未捕获的ReferenceError：无法处理绑定“click：function（）{return editEmployee}” 消息：未定义editEmployee

显示新行，但新插入记录的编辑链接不起作用

修改

我解决了这个问题。问题是“对象”被传递给员工（数据）而不是“员工”。所以在insertEmployee点击中，我将代码更改为：

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

            eList.Employees.push(newEmp);

Answer 1

数据是否实际到达服务器端控制器并更新数据库？ ajax调用发布数据并在服务器上调用Create方法，在Success部分假定服务器上的一切正常。这里所有的成功路径都是说客户端呼叫没问题，这不是服务器的成功。如果您当前有警报声明，则需要确保服务器端实际发布数据，然后再尝试在刷新页面时检索数据。

knockout.js observablearray推不绑定点击

1 个答案: