title: knockout grid with dynamic observables and html template
body: <p>I am trying to implement knockout grid with dynamic observables and html template.</p>
  
  <p><a href="http://jsfiddle.net/ukJuN/26/" rel="nofollow">JSFiddle</a> is here.</p>
  
  <p>I have two templates created, read and write. When one clicks on cell, it should get converted into editable mode. But its applying editing template to complete column. 
  can anyone please help on this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var DynamicObservable = function(data) {
      for (var key in data) {
          this[key] = ko.observable(data[key]);
      }
      
      selectedCell = ko.observable();
      
      templateToUse = function(item) {
          return item === this.selectedCell() ? 'write' : 'read';
      };
  };
  
  var ViewModel = function(data) {
      var self = this;
      self.items = ko.observableArray(ko.utils.arrayMap(data, function(i) {
          return new DynamicObservable(i);
      }));
      self.columns = ko.observableArray();
      for (var key in data[0]) {
          self.columns.push(key);
      }
      
      self.cellClick = function(){
          debugger;
          
      };
  }
  
  var init = [
      { name: "John", age: 23, weight: 145 },
      { name: "Tim", age: 25, weight: 143 },
      { name: "Alex", age: 22, weight: 142 }
  ];
  
  ko.applyBindings(new ViewModel(init));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
  
  &lt;b&gt;Click on cell to edit&lt;/b&gt;
  
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr data-bind="foreach: columns"&gt;
              &lt;th data-bind="text: $data"&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: { data: items, as: 'item'}"&gt;
          &lt;tr data-bind="foreach: $parent.columns"&gt;
              &lt;td data-bind="template: { name: templateToUse }, event:{click:selectedCell}"&gt; &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;pre data-bind="text: ko.toJSON($root, null, 2)"&gt;&lt;/pre&gt;
  
  &lt;script id="read" type="text/html"&gt;
      &lt;div data-bind="text: item[$data]"&gt;&lt;/div&gt;    
  &lt;/script&gt;
  
  &lt;script id="write" type="text/html"&gt;
      &lt;input type="text" data-bind="value: item[$data]"/&gt;  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>