title: KnockoutJS - UI not updating with built-in observableArray methods except push and pop
body: <p>When I do a push or pop operation on my observable array, it is reflected in the ui. However other operations on the array won't change anything in the UI. Here's an example of my case:</p>
  
  <pre><code>&lt;ul data-bind="foreach: addresses"&gt;
       &lt;!-- ko template: {name: 'AddressItemTemplate', data: {address: $data, page: 'update-page'} }--&gt;
       &lt;!-- /ko --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I use my template in two different pages and thats the reason I am using the template data like that.</p>
  
  <pre><code>&lt;script type="text/html" id="AddressItemTemplate"&gt;
      &lt;p data-bind="text: (page == 'update-page') ? 'updating' : 'declined'"&lt;/p&gt;
      &lt;p data-bind="text: address.title"&gt;&lt;/p&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Now on js side, ofc I declared the addresses as an observable array</p>
  
  <pre><code>this.addresses = ko.observableArray([addresObject1, addressObject2, ...])
  </code></pre>
  
  <p>Somewhere on the page, I edit the address values. To have UI reflecting the changes, I do the following:</p>
  
  <pre><code>//suppose we know that the first address is being edited
  var tmp_addresses = addresses();
  tmp_addresses[0].title = 'blabla';
  addresses(tmp_addresses);
  </code></pre>
  
  <p>And there it is, in the viewModel, I can see that the content of the <code>addresses</code> has been updated, but not in the UI??</p>
  
  <pre><code>addresses.push(someAddressObject);
  </code></pre>
  
  <p>or</p>
  
  <pre><code>addresses.pop();
  </code></pre>
  
  <p>works (updates the UI with the new/removed element). But <code>addresses.splice(0, 1, newAddressObject)</code> does not do anything in the UI again. </p>
  
  <p>What am I missing here? How can push pop work and not the others??
  Am I experiencing a bug in knockout framework?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I found out a way to do it, but there's something wrong. I'll come to that but first:</p>
  
  <p>I am well aware that if I use observable objects in the observable array, the changes would be reflected in UI. However <strong>that is exactly the thing I want to avoid.</strong> It is an overkill.</p>
  
  <p>Observable properties should be required in cases where properties are really exposed to user interaction. For example, if you have a UI for setting each of the fields of an object, then yes, observable property would be the right call.</p>
  
  <p>However in my case, I dont even have a UI for updating the address field. Moreover, I dont need tinkering and constantly watching all the properties of all the addresses. In my case, every now and then an update occurs from the server and that changes only a single field in a single address field. </p>
  
  <p><strong>On another perspective</strong> the way I suggest should work. I simply update the whole array at once, not every element individually. It's the exactly the same logic with:</p>
  
  <pre><code>someObservableObject({newObject: withNewFields, ...});
  </code></pre>
  
  <p>Thats why I dont need my objects as observables. I simply want to re-declare the array and be done with the change. For example, it is advised that if you are going to make lots of pushes into the observable array, <strong>dont use array.push(...) multiple times, instead re-declare the larger array on to the observable array variable</strong> in a similar way I do it in my question. Otherwise, I am telling knockout to track every single object and every single field in them, which is hardly what I want.</p>
  
  <p><strong>Now, I finally got it working</strong> but the way I do suggests that there is a cleaner way to do it.</p>
  
  <p>I found out that, the items in the observable array are somehow tracked and not updated when you re-declare the array with them. For example the code I gave in the question would not work. However the code below works:</p>
  
  <pre><code>var tmp_addresses = addresses();
  var tmp_addr = tmp_addresses[0];
  var new_addr = {};
  Object.keys(tmp_addr).forEach(function(key){
      new_addr[key] = tmp_addr[key];
  });
  new_addr.title = 'Hey this is something new!'
  addresses.splice(0, 1, new_addr);
  </code></pre>
  
  <p>Not satisfied? The code below is going to work as well, because we are re-defining the array:</p>
  
  <pre><code>var newAddressObject1 = {...}, newAddressObject2 = {...};
  addresses([newAddressObject1, newAddressObject2]);
  </code></pre>
  
  <p>But the following would not work! </p>
  
  <pre><code>var tmp_addresses = addresses();
  var tmp_addr = tmp_addresses[0];
  tmp_addr.title = 'Hey this address wont update';
  addresses.splice(0, 1, tmp_addr);
  </code></pre>
  
  <p>How come? I think knockout adds an internal property to his items in observableArrays and when I try to reinsert one, it will not update.</p>
  
  <p>My problem has now morphed into creating a <code>new</code> object with the same properties of the desired item in the observable array. The way I coded above is simply very dirty-looking. There's gotta be a better way to do that</p>