Gridstack not updating on delete
<p>Here is my example of Gridstack layout that uses Knockout bindings. The problem is that my view doesn't get updated based on the model, when it should.</p>

<p>After pressing <code>Delete me</code> the console output shows that the <code>widgets</code> observable array gets updated correctly, while the view doesn't. The cause seems to be on this line (which is not being called):</p>

<pre><code>ko.utils.domNodeDisposal.addDisposeCallback(item, function () { 
    self.grid.removeWidget(item); 
});
</code></pre>

<p>As far as I know, the <code>foreach</code> binding should update automatically, why it doesn't?</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 ViewModel = function() {
  var self = this;
  self.grid = null;
  self.widgets = ko.observableArray([{
    x: 0,
    y: 0,
    width: 1,
    height: 1
  }, {
    x: 0,
    y: 1,
    width: 1,
    height: 1
  }]);
  self.deleteWidget = function(item) {
    console.log("widgets before", self.widgets());
    self.widgets.remove(item);
    console.log("widgets after", self.widgets());
    return false;
  };
  self.afterAddWidget = function(items) {
    if (self.grid == null) {
      self.grid = $('.grid-stack').gridstack({
        auto: false
      }).data('gridstack');
    }
    var item = _.find(items, function(i) {
      return i.nodeType == 1
    });
    self.grid.addWidget(item);
    ko.utils.domNodeDisposal.addDisposeCallback(item, function() {
      self.grid.removeWidget(item);
    });
  };
};
ko.applyBindings(new ViewModel());</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.grid-stack {
  background: lightgoldenrodyellow;
}
.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://raw.githubusercontent.com/troolee/gridstack.js/master/dist/gridstack.css" /&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://rawgit.com/troolee/gridstack.js/master/dist/gridstack.js"&gt;&lt;/script&gt;

&lt;div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}"&gt;
  &lt;div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}"&gt;
    &lt;div class="grid-stack-item-content"&gt;
      &lt;button data-bind="click: $root.deleteWidget"&gt;Delete me&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>