[英]How to update observable array element in knockoutjs?
我有以下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不是一個功能
上面的行為是因為只有數組是可觀察的,而不是數組中的單個元素或每個元素的屬性。
當你做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將根據綁定呈現整個數組。
您可以輕松使用ko.mapping插件將對象轉換為可觀察對象: http ://knockoutjs.com/documentation/plugins-mapping.html
將常規JS實體轉換為可觀察實體:
var viewModel = ko.mapping.fromJS(data);
將observable對象轉換為常規JS對象:
var unmapped = ko.mapping.toJS(viewModel);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.