10

我有以下 JavaScript 数组，

[{"unitPrice": 2499,"currency":"$","productId":1,"retailerId":1,"productName":"XX ","formattedPrice":"$ 2,499","productImage":"Images/2012_08_12_00_45_39_4539.jpg","productQuantity":"9","totalPrice":19992},
{"unitPrice": 4999,"currency":"$","productId":2,"retailerId":1,"productName":"XX","formattedPrice":"$ 4,999","productImage":"Images/2012_08_12_00_46_45_4645.jpg","productQuantity":2,"totalPrice":9998},
{"unitPrice":4555,"currency":"$","productId":1,"retailerId":1,"productName":"XXXXX","formattedPrice":"$ 4,555","productImage":"Images/2013_02_12_10_57_49_5749_9868.png","productQuantity":3,"totalPrice":13665}]

这是相关的html，

<table>
<tbody data-bind="foreach: $root">
                    <tr>
                        <td><img width="45" height="45" alt="" data-bind="attr:{src: productImage}"/></td>
                        <td><span data-bind="html: productName"></span></td>
                        <td><span data-bind="html: formattedPrice"></span></td>
                        <td><input type="number" class="quantity" data-bind="value: productQuantity, attr:{'data-id': productId }"  /></td>
                        <td><span data-bind="html: totalPrice"></span></td>
                    </tr>
                </tbody>
</table>

然后我创建了可观察数组，

observableItems = ko.observableArray(items);
ko.applyBindings(observableItems);

现在我能够使用特定的元素，

       var obj = ko.utils.arrayFirst(list(), function (item) {
            return item.productId === id;
        });

然而当我改变时，

item.productQuantity = 20;

但是 UI 没有更新。也试过，

item.productQuantity(item.productQuantity)

但是得到错误 productQuantity 不是一个函数

4

2 回答 2

17

上述行为是因为只有数组是可观察的，而不是数组中的单个元素或每个元素的属性。

当您这样做时item.productQuantity = 20;，这将更新属性，但由于它不是可观察的，因此 UI 不会更新。

同样，item.productQuantity(20)给你一个错误，因为productQuantity它不是可观察的。

您应该查看为数组的每个元素定义对象结构，然后将该类型的元素添加到可观察数组中。完成此操作后，您将能够执行类似item.productQuantity(20)的操作，并且 UI 将立即自行更新。

编辑添加了 OP 提供的功能 :)。此函数会将数组中元素的每个属性转换为可观察对象。

function convertToObservable(list) 
{ 
    var newList = []; 
    $.each(list, function (i, obj) {
        var newObj = {}; 
        Object.keys(obj).forEach(function (key) { 
            newObj[key] = ko.observable(obj[key]); 
        }); 
        newList.push(newObj); 
    }); 
    return newList; 
}

结束编辑

如果您无法更改那段代码，您也可以执行类似observableItems.valueHasMutated(). 但是，这不是一件好事，因为它会向 KO 和您的 UI 发出整个数组已更改的信号，并且 UI 将根据绑定呈现整个数组。

于 2013-02-19T08:53:35.900 回答
11

您可以轻松地使用 ko.mapping 插件将对象转换为可观察： http: //knockoutjs.com/documentation/plugins-mapping.html

将常规 JS 实体转换为可观察实体：

var viewModel = ko.mapping.fromJS(data);

将 observable 对象转换为常规 JS 对象：

var unmapped = ko.mapping.toJS(viewModel);
于 2013-02-19T10:24:25.797 回答