привязка данных json с помощью нокаута

у меня есть таблица, которая "должна" быть связана с результатом 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>

my knockout script for that is this:

<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"}]}

person raberana    schedule 01.06.2012    source источник
comment
ko.applyBindings(viewModel.Model); Также предложение @madcapnmckay о запуске консоли разработчика превосходно. Сообщения об ошибках привязки Knockout полезны. Или viewModel = ko.mapping.fromJSON(data);   -  person kenny    schedule 01.06.2012
comment
что именно мне редактировать? я не понял, что вы комментируете...   -  person raberana    schedule 01.06.2012
comment
Если вы не получаете ошибок в консоли разработчика браузера, F12 во многих браузерах, не уверен. Кажется, что то, что у вас есть выше, не будет связываться, и я ожидаю ошибок. Любое из двух изменений в вашем коде, которые я предложил, я думаю, свяжется.   -  person kenny    schedule 01.06.2012


Ответы (3)


Предполагая, что на стороне сервера все в порядке, ваша модель привязана к свойству .model, но поэтому ваш foreach должен быть

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

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

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

ИЗМЕНИТЬ

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

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

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

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

person madcapnmckay    schedule 01.06.2012
comment
Без дополнительной информации помочь невозможно. Какие ошибки вы видите в консоли? - person madcapnmckay; 01.06.2012
comment
ошибок нет... вы можете увидеть возвращенные данные json в моем обновлении выше... я считаю, что проблема в моем скрипте... - person raberana; 01.06.2012

<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");

person user1983579    schedule 16.01.2013
comment
создайте шаблон javascript, а затем привяжите данные json к таблице: $(#tmpl_ScreenNavigation).tmpl(resultJson).appendTo(#tblRoles) - person user1983579; 16.01.2013

Переместите тег JavaScript в верхнюю часть html-файла прямо над таблицей. Из-за этого данные могут быть заполнены неправильно.

person user2671516    schedule 09.07.2014