使用敲除绑定 json 数据答案

【问题标题】：binding json data using knockout使用敲除绑定 json 数据
【发布时间】：2012-06-06 06:13:18
【问题描述】：

我有一个“应该”与 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"}]}

【问题讨论】：

ko.applyBindings(viewModel.Model); @madcapnmckay 关于运行开发控制台的建议也很棒。 Knockout 的绑定错误消息很有帮助。或者 viewModel = ko.mapping.fromJSON(data);
我究竟应该编辑什么？我没有得到你的评论...
如果您在浏览器的开发控制台中没有收到错误，许多浏览器上的 F12，不确定。看来您上面的内容不会绑定，我预计会出现错误。我认为对您的代码进行的两项更改中的任何一项都会绑定。

标签： ajax json asp.net-mvc-3 knockout.js knockout-mapping-plugin

【解决方案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。

希望这会有所帮助。

【讨论】：

没有更多信息是不可能提供帮助的。您在控制台中看到了哪些错误？
没有错误...您可以在上面的更新中看到返回的json数据...我相信我的脚本是问题...

【解决方案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");

【讨论】：

创建javascript模板，然后将json数据绑定到表：$("#tmpl_ScreenNavigation").tmpl(resultJson).appendTo("#tblRoles")

【解决方案3】：

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

【讨论】：