связывания данных 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); 
    } 

UPDATE: вот мой образец вернулся 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 собственности, но так что ваш Еогеасп должен быть

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

Вот и все, что я вижу прямо сейчас, нужно будет увидеть больше кода, чтобы помочь дальше.

Возможно, вы захотите использовать средства разработки firebug или chrome и подтвердить, какие ошибки javascript вы получаете, если таковые имеются, также проверьте ответ, чтобы убедиться, что ваш метод действия возвращает данные.

EDIT

OK вот jsfiddle вашего кода. Несколько вещей, возможно опечаток, но на всякий случай. Недопустимый тег в вашей разметке, и в вашем json перед комментарием EmployeeName есть комментарий с незавершенным завершением.

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

Вам нужно к model.Employees, как указано выше. Поскольку вы возвращаете json из mvc, у него будут правильные заголовки, поэтому jquery автоматически преобразует их в объект javascript, так что не нужно использовать fromJSON, вместо этого попробуйте JS.

Надеюсь, это поможет.

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-файла непосредственно над таблицей. Из-за этого данные могут быть неправильно заполнены.