0

我有以下 JSON 从 Web 服务返回，我试图将其绑定到一个简单列表，以便为客户显示名称和图像：

{"Customers":{"data":[{"CustomerID":1,"CustomerName":"Jones","CustomerImage":"~/Images/Customers/Jones02.gif","CustomerEnabled":true},{"CustomerID":7,"CustomerName":"Hughes","CustomerImage":"~/Images/Customers/Hughes057847.gif","CustomerEnabled":true},{"CustomerID":13,"CustomerName":"Michaels","CustomerImage":"~/Images/Customers/M12012.gif","CustomerEnabled":true},{"CustomerID":123,"CustomerName":"Bernard","CustomerImage":"~/Images/Customers/kb040412.gif","CustomerEnabled":true}]}}

在我的标记中，我有

<section id="CustomerList">
    <ul data-bind: 'foreach: data'>
        Data: <span data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></span>

        <li>
            <span data-bind="text:CustomerID"></span>
        </li>
    </ul>
</section>

但我无法让它通过淘汰赛的数据绑定写出 ID。

我执行这个过程的 JS 很简单：

var ViewModel = {
    Customer: []
};
dataService.getCustomers(function (data) {
    ViewModel.Customer = data.Customers;
    ko.applyBindings(ViewModel);
});

我可以进入 getCustomers() 回调并验证 JSON 是否像上面那样返回，我还可以查询 ViewModel.Customer 并查看分配的数据，但没有写出任何内容。我认为这将是微不足道的，但到目前为止没有任何效果。

有任何想法吗？

谢谢

4

3 回答 3

2

在：

<section id="CustomerList">
    <ul data-bind: 'foreach: data'>
        Data: <span data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></span>

        <li>
            <span data-bind="text:CustomerID"></span>
        </li>
    </ul>
</section>

改变：

<ul data-bind: 'foreach: data'>

到：

<ul data-bind: 'foreach: Customer>

在：

dataService.getCustomers(function (data) {
    ViewModel.Customer = data.Customers;
    ko.applyBindings(ViewModel);
});

改变：

ViewModel.Customer = data.Customers;

到：

ViewModel.Customer = data.Customers.data;

最后，您需要从 中删除带有数据的调试行，<ul>因为这会使标记无效。

工作示例可以在http://jsfiddle.net/unklefolk/35eQQ/2/查看

于 2012-04-05T11:38:20.770 回答
0

也许绑定应该是这样的：

<ul data-bind="foreach: Customer.data">
    Data: <span data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></span>

    <li>
        <span data-bind="text: CustomerID"></span>
    </li>
</ul>

由于您的视图模型中唯一可绑定的属性是Customer.

即使这样可行，您也可能希望向客户引入一个可观察数组，以便您也可以启用两种方式绑定。然后你也可以使用过滤等等。只需像这样填充可观察数组：

dataService.getCustomers(function (data) {
   ViewModel.MyCustomerObservableArray(data.Customers.data);
   ko.applyBindings(ViewModel);
});
于 2012-04-05T11:32:59.650 回答
0

你的代码不是很清楚..你能准确地发布你在做什么吗？...有几件事

  1. 客户属性需要是一个 oberservablearray
  2. 您还需要首先使用 ko.mapping.fromJSON(serverdata, MappingOptions, viewModel) 将您的 json 转换为 JS 对象。然后，您不需要即时进行字符串化。
  3. 您的服务器数据需要与您的视图模型属性正确映射。您在数组中的对象有几个键，但是在您看来，您没有提到剩余的“键”属性。为此，您需要使用 knockoutjs ignore。

您可以在Knockout 网站上查看映射的工作原理

于 2012-04-06T02:06:43.290 回答