1

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: model.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= ko.mapping.fromJSON(data);
        ko.applyBindings(viewModel);
    }
    );
});
</script>

これが返されたjsonデータのサンプルです。

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

1 に答える 1

4

ブラウザのエラー コンソールを開くと、次のようなものが表示されるはずです。

不明なエラー: バインドを解析できません。メッセージ: ReferenceError: 従業員が定義されていません。バインディング値: foreach: 従業員

Employeesは で定義されていませんviewModel。ただし、 で定義されていviewModel.modelます。次のいずれかの場合、動作するはずです。

  1. data-bindmodel.Employees代わりに foreach :

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

    例: http://jsfiddle.net/Ze2Zs/

  2. viewModelAJAX リクエストの結果を の代わりに直接割り当てますviewModel.model。

    viewModel = ko.mapping.fromJSON(data);

    例: http://jsfiddle.net/wHXeP/

var data = $.getJSON(...)また、補足として、応答はコールバック関数によって処理されるため、割り当てる必要はありません。

var viewModel = {};
$.getJSON("Employees.json", function (data) {
    viewModel.model = ko.mapping.fromJSON(data);
    ko.applyBindings(viewModel);
});
于 2012-06-01T02:03:49.433 に答える