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，工作正常。点击编辑，viewModel的编辑方法也被称为

 <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个Employee变量，一个是简单的对象，即var Employee 2是可观察的，第三是编辑方法参数，所以不要与参数Employee混淆它只是返回点击的当前数据。

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

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

淘汰赛编辑不起作用

1 个答案: