ajax - 使用敲除绑定 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: 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.model = ko.mapping.fromJSON(data);
        ko.applyBindings(viewModel);
    }
    );
});
</script>

我正在尝试将表与 json 结果绑定，但它不起作用，问题可能出在哪里......这是我在控制器中的 json：

 public ActionResult GetEmployees()
    {
        var r = db.Employees;
        var s = new
        {
            Employees = r.Select(x => new { empId = x.Id, empName = x.Name, empNumber = x.Number, empPassword = x.Password, empRole = x.Role }).ToList()
               .Select(x => new
               {
                   EmployeeId = x.empId,
                   EmployeeName = x.empName,
                   EmployeeNumber = x.empNumber,
                   EmployeePassword = x.empPassword,
                   EmployeeRole = x.empRole
               }).ToArray(),
        };

        return Json(s, JsonRequestBehavior.AllowGet);
    }

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

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

Answer 1

假设一切服务器端都很好，你的模型被绑定到一个 .model 属性，但你的 foreach 应该是

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

这就是我现在能看到的所有内容，需要查看更多代码才能进一步提供帮助。

您可能需要使用 firebug 或 chrome 开发工具并确认收到的 javascript 错误（如果有），还要检查响应以确保您的操作方法正在返回数据。

编辑

好的，这是您的代码的 jsfiddle。一些事情，可能是拼写错误，但以防万一。您的标记中缺少标记，并且您的 json 中第一个 EmployeeName 之前有一个未终止的注释。

http://jsfiddle.net/madcapnmckay/3rRUQ/1/

您确实需要 model.Employees 如上所述。因为您从 mvc 返回 json 它将具有正确的标头，因此 jquery 会自动将其转换为 javascript 对象，因此不需要 fromJSON，而是尝试 fromJS。

希望这可以帮助。

Answer 2

<script id="tmpl_ScreenNavigation" type="text/html">
<tr class="erow">
    {{if ScreenParentNevigationId}}
    <td width="250px"><table cellpadding="5" class="Permission" sceenid="${ScreenNevigationId}" border="0" RoleDetailId="0"><tr><td><label><input type="checkbox" id="view${ScreenNevigationId}" class="View" />&nbsp;View</label></td><td><label><input type="checkbox" id="AddModify${ScreenNevigationId}" class="Save"/>&nbsp;Add/Modify</label></td><td><label><input type="checkbox" id="Delete${ScreenNevigationId}" class="Delete" />&nbsp;Delete</label></td></tr></table></td>
    {{/if}}
    {{if !ScreenParentNevigationId}}
    <td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}} width="250px"><table cellpadding="5" class="Permission" sceenid="${ScreenNevigationId}" border="0" RoleDetailId="0"><tr><td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}><label><input type="checkbox" id="view${ScreenNevigationId}" class="View" />&nbsp;View</label></td></tr></table></td>
    {{/if}}
    <td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}>${ScreenName}</td>
    <td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}>${ScreenDescription}</td>
</tr>
</script>

$("#tmpl_ScreenNavigation").tmpl(resultJson).appendTo("#tblRoles");

Answer 3

将 JavaScript 标记的位置更改为表格上方 html 文件的顶部。因此，数据可能无法正确填充。