json和淘汰赛

Question

我有一个表“应该”与 json 的结果绑定但它不工作，可能是什么错误？

<table>
<thead>
    <tr>
        <th>
            Id
        </th>
        <th>
            Number
        </th>
        <th>
            Name
        </th>
        <th>
            Password
        </th>
        <th>
            Role
        </th>
    </tr>
</thead>
<tbody data-bind="foreach: model.Employees">
    <tr>
        <td>
            <span data-bind="text: EmployeeId"></span>
        </td>
        <td>
            <span data-bind="text: EmployeeNumber"></span>
        </td>
        <td>
            <span data-bind="text: EmployeeName"></span>
        </td>
        <td>
            <span data-bind="text: EmployeePassword"></span>
        </td>
        <td>
            <span data-bind="text: EmployeeRole"></span>
        </td>
    </tr>
</tbody>

我的淘汰脚本是这样的：

<script type="text/javascript">
$(document).ready(function () {
    var viewModel = {};
    var data = $.getJSON("Employees.json", function (data) {
        viewModel= ko.mapping.fromJSON(data);
        ko.applyBindings(viewModel);
    }
    );
});
</script>

这是我返回的 json 数据示例：

 {"Employees":[{"EmployeeId":1,"EmployeeName":X","EmployeeNumber":"1","EmployeePassword":"x","EmployeeRole":"User"},{"EmployeeId":10,"EmployeeName":"S","EmployeeNumber":"21","EmployeePassword":"s","EmployeeRole":"Admin"}]}

Answer 1

如果您打开浏览器的错误控制台，我敢打赌您会看到如下内容：

未捕获的错误：无法解析绑定。消息：参考错误： 员工没有定义；绑定值：foreach:Employees

Employees 未在 viewModel 上定义。但是，它是在viewModel.model 上定义的。如果您满足以下任一条件，事情应该会奏效：

1. data-bindmodel.Employees 上的 foreach 代替：

   <tbody data-bind="foreach: model.Employees">
   

   示例： http://jsfiddle.net/Ze2Zs/

2. 将 AJAX 请求的结果直接分配给 viewModel 而不是 viewModel.model：

   viewModel = ko.mapping.fromJSON(data);
   

   示例： http://jsfiddle.net/wHXeP/

另外作为旁注，无需分配var data = $.getJSON(...)，因为响应由回调函数处理：

var viewModel = {};
$.getJSON("Employees.json", function (data) {
    viewModel.model = ko.mapping.fromJSON(data);
    ko.applyBindings(viewModel);
});