3

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

3 に答える 3

4

サーバー側がすべて正常であると仮定すると、モデルは.modelプロパティにバインドされていますが、foreachは次のようになります。

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

私が今見ることができるのはそれだけです。さらに役立つために、より多くのコードを見る必要があります。

firebugまたはchromedevツールを使用して、受信しているjavascriptエラーがある場合はそれを確認し、応答をチェックして、アクションメソッドがデータを返していることを確認することもできます。

編集

OKここにあなたのコードのjsfiddleがあります。いくつかのこと、おそらくタイプミスですが、念のため。マークアップにタグがなく、最初のEmployeeNameの前のjsonに終了していないコメントがあります。

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

上記のようにmodel.Employeesを行う必要があります。mvcからjsonを返すため、正しいヘッダーが含まれるため、jqueryは自動的にjavascriptオブジェクトに変換するため、fromJSONは必要ありません。代わりに、fromJSを試してください。

お役に立てれば。

于 2012-06-01T00:40:36.437 に答える
0 
<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"）;

于 2013-01-16T12:14:13.660 に答える
0

JavaScriptタグの場所を、テーブルのすぐ上のhtmlファイルの先頭に変更します。そのため、データが正しく入力されていない可能性があります。

于 2014-07-09T16:43:59.237 に答える