Question

我从Web服务返回以下JSON，我试图绑定到一个简单的列表，只是为了向客户显示名称和图像：

{"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并查看分配的数据，但没有任何内容被写出来。我认为这将是微不足道的，但迄今为止没有任何工作。

有什么想法吗？

由于

Answer 1

在：

<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/

查看工作样本

Answer 2

也许绑定看起来像这样：

<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>

由于viewmodel中唯一的可绑定属性是Customer。

即使可行，您可能希望向客户介绍一个可观察的数组，以便您也可以启用双向绑定。然后你也可以使用过滤，什么不是。只需像这样填充可观察数组：

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

Answer 3

你的代码不是很清楚..你准确地发布了你正在做的事情吗？......有一些事情

客户财产必须是oberservablearray
你还需要先使用你的json转换成JS对象 ko.mapping.fromJSON（serverdata，MappingOptions，viewModel）。您那么就不需要动态串联。
您的服务器数据需要与您的viewmodel正确映射属性。数组中的对象有几个键，但是在您没有提到剩余的“关键”属性。对于你需要使用knockoutjs ignore。

您可以在Knockout website

Knockout中的简单数组映射

3 个答案: