Knockout template will not update list when adding to observable array

Question

I have a knockout template:

<script type="text/javascript" id="myList">        
  // template stuff here                   
</script>

I call it in with the foreach option:

<div data-bind="template: { name:'myList', foreach: ItemList }"></div>

I get the view model form my controller and use the following Javascript to bind it:

var viewModel = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model));                                        
ko.applyBindings(viewModel, document.getElementById("contentsDetails"));

I return a few items from my controller and everything renders fine.

My problem is that if I add to my observable array

var itemToAdd = {
            Name:  ko.observable("name a"),
            Desc:  ko.observable("desc a")
 }

 viewModel.MyObservableArray().push(itemToAdd);

I have checked the array is observable using:

 console.log(ko.isObservable(viewModel.MyObservableArray));

It does not update the UI template by adding the new item to the list.

What am I doing wrong here?

James Thorpe · Accepted Answer · 2015-05-19 13:40:38Z

9

It's this line:

viewModel.MyObservableArray().push(itemToAdd);

By putting brackets after MyObservableArray, you're accessing the underlying array, and directly pushing the value into it. Knockout doesn't see this change. Instead, call .push directly on the observableArray:

viewModel.MyObservableArray.push(itemToAdd);

This is a method in knockout that will update the underlying array and notify any subscribers of the change, and will result in the UI being updated.

Alternatively, you can keep it as you have it, but inform knockout that it has changed, which will trigger the updates:

viewModel.MyObservableArray().push(itemToAdd);
viewModel.MyObservableArray.valueHasMutated();

edited May 19, 2015 at 13:40

answered May 19, 2015 at 13:37

James Thorpe

32.3k6 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

G_S Over a year ago

Just wanted to understand.... viewModel.MyObservableArray().push(itemToAdd); This pushes the value but it wil be no longer an observable kind of??

James Thorpe Over a year ago

@G_S viewModel.MyObservableArray() returns the underlying native javascript array - the observableArray wrapper still exists around it. If you push a value into the underlying array directly, knockout doesn't know you've done so. The observableArray object redefines the array methods to both update the underlying native array, and provide notifications to anything depending on that observableArray. That's why you can call .valueHasMutated on the observableArray after changing the underlying array - it still exists and can then update itself properly based on the new contents.

Collectives™ on Stack Overflow

Knockout template will not update list when adding to observable array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related