CODEWITHSUNDEEP
javascriptknockout.js
user1863802
user1863802

Reputation: 51

KnockoutJS observable not updated on screen

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

https://jsfiddle.net/L69jk5yL/

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>

Upvotes: 0

Views: 333

Answers (1)

Graham Penrose
Graham Penrose

Reputation: 477

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".

Upvotes: 2

Related Questions