我有以下
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,"productId":2,"productName":"XX","formattedPrice":"$4,999","productImage":"Images/2012_08_12_00_46_45_4645.jpg","productQuantity":2,"totalPrice":9998},{"unitPrice":4555,"productName":"XXXXX",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>
然后我创建了observable数组,
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)
解决方法
上述行为是因为只有数组是可观察的,而不是数组中的各个元素或每个元素的属性.
当你做item.productQuantity = 20时,这将更新属性,但由于它不是可观察的,所以UI不会被更新.
Similary,item.productQuantity(20)给你一个错误,因为productQuantity不是可观察的.
您应该查看为数组的每个元素定义对象结构,然后将该类型的元素添加到observable数组中.一旦完成,您将能够像item.productQuantity(20)这样做,UI将立即更新.
EDIT添加了由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将基于绑定渲染整个数组.
