title: Updating SlickGrid with Knockoutjs via dependentObservable
body: <p>I'm using SlickGrid with knockout.js based on the example <a href="http://jsfiddle.net/rniemeyer/A9NrP/">http://jsfiddle.net/rniemeyer/A9NrP/</a></p>
  
  <p>I have the grid populating and the add button working as per the example. The problem I'm having is when I update the rows property of my viewmodel via a ko.dependentObservable the 'update' section of the ko.bindingHandlers is fired but slick grid does not pick up the changes.</p>
  
  <p>html that defines the binding:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="grid" data-bind="slickGrid: { data: rows, columns: columns }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>SlickGrid code (same as the example): </p>
  
  <pre class="lang-js prettyprint-override"><code>var grid;
  ko.bindingHandlers.slickGrid = {
      init: function (element, valueAccessor) {
          var settings = valueAccessor();
          var data = ko.utils.unwrapObservable(settings.data);
          var columns = ko.utils.unwrapObservable(settings.columns);
          var options = ko.utils.unwrapObservable(settings.options) || {};
          grid = new Slick.Grid(element, data, columns, options);
      },
      update: function (element, valueAccessor, allBindingAccessor, viewModel) {
          var settings = valueAccessor();
          // I can see the correct data here but the grid does not update
          var data = ko.utils.unwrapObservable(settings.data);  
          grid.render();
      }
  }
  </code></pre>
  
  <p>my model:</p>
  
  <pre class="lang-js prettyprint-override"><code>myViewModel = {
  data : ko.observableArray(),
  tabs: ['High', 'Medium', 'Low'],
  rows : ko.observableArray([]),
  columns : [
          {
              id: "id",
              name: "ID",
              field: "id"
          },
          {
              id: "Location",
              name: "Location",
              field: "Location"
          },
          {
              id: "Comment",
              name: "Comment",
              field: "Comment"
          }
          ],
  addItem: function() { // this works and SlickGrid adds a new row
    this.rows.push(new ModelRow(0, "New", 5.00));  
  },
  </code></pre>
  
  <p>}</p>
  
  <p>The code that make the ajax call, and fires ko.bindingHandlers.slickGrid.update but slickgrid doesnt seem to pick up the changes, the ajax does return valid data, and is fired when the user clicks on a link:</p>
  
  <pre class="lang-js prettyprint-override"><code>ko.dependentObservable(function () {
     if (this.data.lastAlarmRequest) this.data.lastAlarmRequest.abort();
         this.data.lastAlarmRequest = $.get("/audit/alarmsdata/high", null, this.rows);
  }, i2owater.viewmodels.AlarmsForViewModel);
  </code></pre>
  
  <p>Why does the addItem function work but not the ko.bindingHandlers.slickGrid.update? In the update function I can see the correct data that the grid should be bound to. 
  Is it because all the data in the rows propertys is overwritten?</p>
  
  <p>UPDATE:
  I've tried to use grid.invalidate(); but it doesnt work and have also seen that the addItem function stops working once ko.dependentObservable is executed</p>