Adding item to observableArray not updating view on jQuery button click

Question

I'm trying to work out why the following example doesn't work.

The observableArray isn't updated until it is manually told that it has changed (using valueHasMutated() ).

I thought the whole point of the observables was that when it changed the view is automatically updated.

<button type='button' id='add'>add</button>
<button type='button' id='mutated'>force update</button>
<div id="short_tasks" data-bind="foreach: list">
  <div data-bind="text: title"></div>
</div>

JS:

var ListTest = function () {

  this.list = ko.observableArray([{title: 'item1'}]);
}

var viewModel = new ListTest();
ko.applyBindings(viewModel);

$('#add').click(function () {
  viewModel.list().push({title: 'new item'});
});

$('#mutated').click(function() {
  viewModel.list.valueHasMutated();
});

jsFiddle: http://jsfiddle.net/InsaneWookie/HFgbR/

RP Niemeyer · Accepted Answer · 2013-01-06 03:47:35Z

9

You will want to call push directly on the observableArray, which will push your item to the underlying array and notify any subscribers.

viewModel.list.push({title: 'new item'});

answered Jan 6, 2013 at 3:47

RP Niemeyer

115k18 gold badges295 silver badges212 bronze badges

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

1 Comment

Rowan Over a year ago

Damn, thanks, worked perfectly. I knew I must have been missing something.

Collectives™ on Stack Overflow

Adding item to observableArray not updating view on jQuery button click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related