如何更新knockoutjs中的可观察数组元素？ [英] How to update observable array element in knockoutjs?

问题描述

我有以下JavaScript数组，

I have following JavaScript array,

[{"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，

here is the relevent 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数组，

Then I have created observable array as,

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

现在我能够使用，

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

但是当我改变时，

item.productQuantity = 20;

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

But UI is not updating. Tried also,

item.productQuantity(item.productQuantity)

但是获取错误productQuantity不是函数

But getting error productQuantity is not a function

推荐答案

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

The above behavior is because only the array is an observable and not the individual elements within the array or the properties of each element.

当您执行 item.productQuantity = 20; 时，这将更新属性，但因为它不是可观察的，UI不会更新。

When you do item.productQuantity = 20;, this will update the property but since it is not an observable, the UI does not get updated.

类似， item.productQuantity（20）给出错误，因为 productQuantity 不是可观察的。

Similary, item.productQuantity(20) gives you an error because productQuantity is not an observable.

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

You should look at defining the object structure for each element of your array and then add elements of that type to your observable array. Once this is done, you will be able to do something like item.productQuantity(20) and the UI will update itself immediately.

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

EDIT Added the function provided by the OP :). This function will convert each property of the elements in an array to observables.

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

END EDIT

如果您无法更改该段代码，您还可以执行类似 observableItems.valueHasMutated（）的操作。但是，这不是一件好事，因为它向KO和您的UI发出信号表明整个数组已经更改，UI将根据绑定呈现整个数组。

If you are unable to change that piece of code, you can also do something like observableItems.valueHasMutated(). However, this is not a good thing to do as it signals to KO and your UI that the whole array has changed and the UI will render the whole array based on the bindings.

这篇关于如何更新knockoutjs中的可观察数组元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！