挖空编辑不起作用

Question

以下是挖空对象的声明和初始化

var EmployeeModel = function(data) {
    //Make the self as 'this' reference
    var self = this;
    //Declare observable which will be bind with UI 
    self.EmployeeID = ko.observable("");
    self.FirstName = ko.observable("");
    self.LastName = ko.observable("");
    var Employee = {
        EmployeeID: self.EmployeeID,
        FirstName: self.FirstName,
        LastName: self.LastName
    };

    self.Employees = ko.observableArray(data); // Contains the list of employees
    self.Employee = ko.observable();

    // Edit Employee details
    self.edit = function (Employee) {
        alert("edit");
        self.Employee(Employee);
        $("#EmployeePreview").css("display", "none");
        $("#PaneEdit").css("display", "block");
    }
    // Edit Employee details
    self.preview = function (Employee) {
        alert("preview");
        self.Employee(Employee);
        $("#PaneEdit").css("display", "none");
        $("#EmployeePreview").css("display", "block");
    }
    // Cancel Employee details
    self.cancel = function () {
        self.Employee(null);
    }
}
$(document).ready(function () {
    $.getJSON("/Employee/GetData", null, function (data) {
        var viewModel = new EmployeeModel(data);
        ko.applyBindings(viewModel);
        viewModel.Employee(viewModel.Employees()[0]);
    });
});

以下是我的 HTML，它工作正常。单击"编辑"时，视图模型的编辑方法也被调用

 <table cellspacing="10px" border="0">
    <tr>
    <td width="50%" style="vertical-align:text-top;" >
        <table  class="List" border="0" cellspacing="4px" cellpadding="4px">
        <!---->
         <tbody data-bind="foreach: Employees">
            <tr>
                <td rowspan="2" width="5%"><img src="../../Images/photo.jpg" height="40px" width="40px" alt="Projects" style="cursor:pointer;" onclick=""/></td>
                <td width="5%">
                       <img data-bind="click: $root.preview" src="../../Images/Preview.png" height="16px" width="16px" alt="Projects" style="cursor:pointer;" "/>
                </td>
                <td data-bind="text: FirstName"></td>
            </tr>
            <tr>
                <td width="5%">
                     <img  data-bind="click: $root.edit" src="../../Images/Edit.png" height="16px" width="16px" alt="Projects" style="cursor:pointer;" onclick="EditEmp();"/></td>
                <td data-bind="text: LastName"></td>
            </tr>
           <!---->
           </tbody>
           </table> 
        </td>

但是问题是，即使尝试了很多事情，编辑方法中的以下语句也不起作用

    self.Employee(Employee);

可以请任何人帮助我吗提前致谢

Answer 1

你有 3 个员工变量一个是简单对象，即变量员工2 是可观察的，第三个是编辑方法参数，所以不要与参数员工混淆，它只是返回单击的当前数据。

var Employee = {   //this variable is useless
    EmployeeID: self.EmployeeID,
    FirstName: self.FirstName,
    LastName: self.LastName
};

希望它能 http://jsfiddle.net/CLCYC/1/