Databases
StackOverflow2013
Postsdbo
POThe binding could not detect changes of observableArray when assign a new array to observableArray in Knockout JS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POThe binding could not detect changes of observableArray when assign a new array to observableArray in Knockout JS
    primarykey
    data
    text
    <p>I have a template binding to an observableArray</p> <pre><code>&lt;ul data-bind="template: { name: 'defaultTemplate', foreach: itemsArray}"&gt;&lt;/ul&gt; ... </code></pre> <p>And i need to refresh data each time by clicking a link</p> <pre><code>&lt;a data-bind="click: LoadData"&gt;&lt;span&gt;Refresh&lt;/span&gt;&lt;/a&gt; </code></pre> <p>The first version of my viewModel:</p> <pre><code>function viewModel (){ this.itmesArray = ko.observableArray([]); self = this; this.LoadData(){ if('undefined' != typeof MusicArray ) self.itmesArray.removeAll(); LoadDataFromServerAsync(self.itmesArray); } //ini LoadData(); ... } </code></pre> <p>But the problem is that the data is loaded from server in async, so when i click the link fast with little time interval, then the data may duplicate multi times in my obeservable array. So i think i need load data to a new array in each refreshing. </p> <p>Then the second version of viewModel:</p> <pre><code>function viewModel (){ this.itmesArray = ko.observableArray([]); self = this; this.LoadData(){ if('undefined' != typeof MusicArray ) self.itmesArray.removeAll(); var tempArray = new Array(); LoadDataFromServerAsync(tempArray); self.itmesArray(tempArray); } //ini LoadData(); ... } </code></pre> <p>And the new problem is that the UI could not sense the changes of array, it seems <strong>self.itmesArray(tempArray)</strong> will construct a new observableArray object, but the template bindging is still tracking the old observableArray object, I'm not sure about this. So i want to know how to notify the template/ui binding that my array has changed or is there any other workaround to fix my problem?</p> <p>Added: Code on jsFiddle <a href="http://jsfiddle.net/zzcJC/10/" rel="nofollow">http://jsfiddle.net/zzcJC/10/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USHyden
    1. USHyden
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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