Question

95

How to update observable array element in knockoutjs?

rated 0 times [ 98] [ 3] / answers: 1 / hits: 50236 / 12 Years ago, tue, february 19, 2013, 12:00:00

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

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>

Then I have created observable array as,

observableItems = ko.observableArray(items);

ko.applyBindings(observableItems);

Now I was able to get an specfic element using,

       var obj = ko.utils.arrayFirst(list(), function (item) {

            return item.productId === id;

        });

However when I change,

item.productQuantity = 20;

But UI is not updating. Tried also,

item.productQuantity(item.productQuantity)

But getting error productQuantity is not a function

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stephonkeandrer

Add To Favorites

Follow

Total Points: 392

Total Questions: 94

Total Answers: 100

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

stephonkeandrer questions

1 Electron: how to open an url in the same window and after the user do some action go back to application in the same window

Thu, Mar 24, 22, 00:00, 2 Years ago

1 How to disable scroll on body when fullscreen menu open

Sun, Jun 28, 20, 00:00, 4 Years ago

1 How databind a textarea component text value and update it?

Tue, Jun 9, 20, 00:00, 4 Years ago

1 Angular; how to re-render component data when I update variable in script. Binding data is working, but not updating

Mon, May 4, 20, 00:00, 4 Years ago

1 Loading module was blocked because of a disallowed MIME type (“application/wasm”)

Sun, Oct 13, 19, 00:00, 5 Years ago

View All

answered 12 Years ago hasancolec · Accepted Answer

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.

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

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

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.

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

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.