Databases
StackOverflow2013
Postsdbo
POObservableArray only updating UI after Remove
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POObservableArray only updating UI after Remove
    text
    copied!<p>I seem to have stumbled into an interesting anomoly with KnockoutJS. </p> <p>I have an object with an ko.obseravableArray in it.</p> <p>I can programmatically, before I apply bindings add items to the array. When the UI updates it looks correct. Then when I click on a button to add an item to the array it appears as if nothing has happened. However, when I remove an item from the array the UI then updates. </p> <pre><code> var Feature = function (desription, price) { var self = this; var _description = desription; self.description = ko.observable(_description); var _price = price; self.price = ko.observable(_price); } var ItemFeature = function(feature) { var self = this; var _feature = feature; self.feature = ko.observable(_feature); } var Item = function () { var self = this; self.featuresList = [ new Feature("Feature 1", 1.50), new Feature("Feature 2", 2.00) ]; self.features = ko.observableArray(); self.addNewFeature = function () { self.features().push(new ItemFeature(self.featuresList[0])); } self.removeFeature = function (sender) { self.features.remove(sender); } } var _viewModel = new Item(); _viewModel.addNewFeature(); ko.applyBindings(_viewModel); </code></pre> <p>And the markup:</p> <pre><code> &lt;table&gt; &lt;thead&gt;&lt;tr&gt; &lt;th&gt;Feature&lt;/th&gt; &lt;th&gt;Cost&lt;/th&gt; &lt;/tr&gt;&lt;/thead&gt; &lt;tbody data-bind="foreach: features"&gt; &lt;tr&gt; &lt;td&gt;&lt;select data-bind="options: $root.featuresList, value: feature, optionsText:'description'"&gt;&lt;/select&gt;&lt;/td&gt; &lt;td data-bind="text: feature().description"&gt;&lt;/td&gt; &lt;td data-bind="text: feature().price"&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="#" data-bind="click: $root.removeFeature"&gt;Remove&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;a href="#" data-bind="click: addNewFeature"&gt;Add a feature&lt;/a&gt; </code></pre> <p>I have also put together an example of this. <a href="http://jsfiddle.net/Q6J6a/7/" rel="nofollow">http://jsfiddle.net/Q6J6a/7/</a></p> <p>I feel like I'm missing something small, but it's not jumping out at me. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload