A Pen by Rahul P Nath.

index.html

<div>
  <button data-bind="click:addNonObservable" >Add Non Observable</button>
  <button data-bind="click:addObservable" >Add Observable</button>
</div>
<br />
<div>
  <select data-bind="options: persons,
                     optionsText:'name',
                     optionsCaption:'Choose Person to Edit',
                     value: selectedPerson"></select>
  <br />
  <br />
  <div data-bind= "with:selectedPerson" >
    <label>Edit Name</label>
    <input data-bind="value: $data.name, valueUpdate:'afterkeydown'"></div> 
  </div>
</div>

INotifyCollectionChanged.markdown

INotifyCollectionChanged

This is an example for the blog post 'KnockoutJS for XAML Developers' - http://www.rahulpnath.com/blog/knockoutjs-for-xaml-developers/

A Pen by Rahul P Nath on CodePen.

License.

script.js

// View Model
function PersonObservableVM(name){
  this.name = ko.observable(name);
}

function PersonNotObservableVM(name){
  this.name = name;
}

function PersonHubVM() {
  var self = this;
  var itemCount = 0;
  var temp = new PersonObservableVM( "Observable" + itemCount);
  self.persons = ko.observableArray();

  self.selectedPerson =ko.observable();

  self.addNonObservable = function(){
    self.persons.push(new PersonNotObservableVM("Non Observable" + itemCount));
    itemCount+= 1;
  }

  self.addObservable = function(){
    self.persons.push(new PersonObservableVM( "Observable" + itemCount));
    itemCount+= 1;
  }

}

ko.applyBindings(new PersonHubVM());