KnockoutJS observable not updated on screen

Question

I seem to be doing something wrong but can't figure out! I have a fiddle here:

I have an observable _index which initially gets set a value of 11. When I select something in the dropdown, the value is updated to 12, as I can see in the knockout model, however the value on screen does not update.

function viewModel() {
    var self = this;    
    self._index = ko.observable("11");        

     self.selectResponse = function (item) {
            alert('current ko value: ' + self._index());
            self._index = "12";
        alert('new ko value: ' + self._index);
     }
}

ko.applyBindings(new viewModel());

<p>index: <strong data-bind="text: _index"></strong></p>

  <select name="dateSelected" id="dateSelected" data-bind="event: { change: $root.selectResponse }">
         <option value="">Select something...</option>
        <option value="a">a</option>
 </select>

You have to set it by calling it with a value: self._index("12"). Have you done the tutorials or read the docs? — user3297291

Graham Harper Graham Harper · Accepted Answer · 2017-04-13T17:09:31

When you update a Knockout Observable, you have to call the observable function, e.g.

self._index("12");

By writing self._index = "12"; you're actually replacing the Observable property with a scalar string property of value "12".

KnockoutJS observable not updated on screen

1 Answers