使用 Knockoutjs 绑定对象列表答案

【问题标题】：Binding list of objects with Knockoutjs使用 Knockoutjs 绑定对象列表
【发布时间】：2013-08-03 05:49:57
【问题描述】：

我正在尝试使用 KnockoutJS 和 Knockout Mapping 将数据绑定到 ASP.NET Webforms 应用程序

HTML

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.3.0.js" type="text/javascript"></script>
<script src="Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script type="text/javascript">

    function bindModel(data) {
        var viewModel;
        viewModel = ko.mapping.fromJS(data);
        console.log(viewModel);
        ko.applyBindings(viewModel);
    }

    $(document).ready(function () {
        $.ajax({
            url: "TestPage.aspx/GetItems",
            data: {},
            type: "POST",
            contentType: "application/json",
            dataType: "JSON",
            timeout: 10000,
            success: function (result) {
                bindModel(result);
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });
    });
</script>
...
<table>
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Item">
        <tr>
            <td data-bind="text: Id">
            </td>
            <td data-bind="text: Name">
            </td>
        </tr>
    </tbody>
</table>

[WebMethod]
public static List<Item> GetItems()
{
    List<Item> itemlist = new List<Item>
        {
            new Item {Id = 1, Name = "Item1", Description = "Item 1 Description"},
            new Item {Id = 2, Name = "Item2", Description = "Item 2 Description"}
        };

    return itemlist;
}

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }

}

JSON 响应

{"d":[{"__type":"KnockoutWebFormsTest.Item","Id":1,"Name":"Item1","Description":"Item 1 Description"},{"__type":"KnockoutWebFormsTest.Item","Id":2,"Name":"Item2","Description":"Item 2 Description"}]}

但这会报错，

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: foreach: Item
Message: Item is not defined

我在这里做错了什么，如何解决这个问题？

编辑：

如果我直接用数据调用bindModel，比如

bindModel({ "d": [{ "__type": "KnockoutWebFormsTest.Item", "Id": 21, "Name": "Item1", "Description": "Item 1 Description" }, { "__type": "KnockoutWebFormsTest.Item", "Id": 2, "Name": "Item2", "Description": "Item 2 Description"}] });

并将data-bind="foreach: Item" 更改为data-bind="foreach: d"（根据 david.s 的建议）

它工作正常......但如果我将 JSON 结果直接传递给 bindModel 它会给出错误

d is not defined

知道如何解决这个问题吗？

【问题讨论】：

对不起，我把它从评论移到了建议的答案。

标签： c# asp.net knockout.js webforms knockout-mapping-plugin

【解决方案1】：

从您的 JSON 响应 {"d":[ ... ]} 我可以看到该数组称为 d。所以你的绑定应该是foreach: d。

【讨论】：

【解决方案2】：

只是一个猜测，但您没有传递要绑定的数组。您正在传递 json 对象。 {d:[{foo:bar},{foo:bar},]}

您可以更改此行bindModel(result); 到bindModel(result.d); 以访问“d”包含的数组。

我创建了一个 JSBin.. http://jsbin.com/uxikew/2/edit

ajax 调用已被删除，但你明白了。

【讨论】：

你没有传递要绑定的数组是什么意思？

【解决方案3】：

感谢所有的答案和帮助...

终于搞定了，

通过将 data-bind="foreach: Item" 更改为 data-bind="foreach: d"（如 david.s 建议的那样）

和viewModel = ko.mapping.fromJS(data); 到viewModel = ko.mapping.fromJSON(data);

【讨论】：

如果你从某人的帖子中得到答案，那么他们应该得到接受的答案。