在 Knockout foreach 数据绑定中使用服务器端对象类型答案

【问题标题】：Using server side object type in Knockout foreach Databinding在 Knockout foreach 数据绑定中使用服务器端对象类型
【发布时间】：2013-08-13 07:51:16
【问题描述】：

我从 ASP.NET Web 方法得到这个 JSON 响应

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

然后使用 KnockoutJS 我可以用这段代码绑定数据，

Javascript：

function bindModel(data) {
    var viewModel;
    viewModel = ko.mapping.fromJSON(data);
    ko.applyBindings(viewModel);
  }

HTML：

<tbody data-bind="foreach: d">
    <tr>
        <td data-bind="text: Id"></td>
        <td data-bind="text: Name"></td>
    </tr>
</tbody>

这在foreach 循环中使用d 的对象类型，但现在我需要在foreach 循环中使用我的服务器对象类型Item，

<tbody data-bind="foreach: Item">

我怎样才能做到这一点？

注意：这与我之前在SO的问题有关

编辑 1：

服务器端代码 (C#)

[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; }
}

编辑 2：

来自这个 Javascript 代码

var jsonObject;
jsonObject = ko.mapping.fromJSON(data);
console.log(data);
console.log(jsonObject);
console.log(jsonObject.d);

我明白了

数据

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

jsonObject

>Object {d: function, __ko_mapping__: Object}
 >__ko_mapping__: Object
 >d: Object[0]
 >__proto__: Object

jsonObject.d

[]

【问题讨论】：

您能告诉我们您是如何在服务器端将其序列化为 JSON 的吗？
@SimonWhitehead 添加了 C# 代码作为编辑，请检查。

标签： c# asp.net json knockout.js

【解决方案1】：

您无法更改我所看到的默认行为.. 因为这是一个返回 JSON 的 WebMethod - 从 .NET 3.5 开始，添加 d 属性的重大更改在返回的有效负载上。

请看这里：http://encosia.com/a-breaking-change-between-versions-of-aspnet-ajax/

具体来说：

So the wrapping of the "d" parameter prevents direct execution of the string as script. No Object or Array constructor worries..

你可以做的就是把它分配到别的地方，像这样：

var jsonObject;
jsonObject = ko.mapping.fromJSON(data);
var viewModel = { Item: jsonObject.d };
ko.applyBindings(viewModel);

这将允许您设置绑定：

<tbody data-bind="foreach: Item">

【讨论】：

感谢您的回答，但后来我收到此错误：Item is not defined。 :(

【解决方案2】：

你应该改变你的数据并像这样构建它：

Data = [d:[{
Id: "1",
Name: "Saeed",
LastName: "SWD",
Description: "ok",
Items:[{ Id: "1", Description: "ok"},
       { Id: "1", Description: "ok"}]
}]];

然后您将能够访问以下项目：

<table data-bind="foreach: d">
    <tbody data-bind="foreach: Items">

【讨论】：