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 dev工具并确认您收到的javascript错误（如果有），还要检查响应以确保您的操作方法返回数据。

修改

好的，这是你的代码的一个小问题。一些事情，可能是打字错误，但以防万一。标记中缺少标记，并且在第一个EmployeeName之前，json中有一个未终止的注释。

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>

$（＆＃34;＃tmpl_ScreenNavigation＆＃34）TMPL（resultJson）.appendTo。（＆＃34;＃tblRoles＆＃34）;

Answer 3

将JavaScript代码的位置更改为表格正上方的html文件的顶部。由于这个原因，数据可能无法正确填充。

使用knockout绑定json数据

3 个答案: