title: auto apply masonry in knockout binding handler after dynamic update
body: <p>I am using <a href="http://knockoutjs.com/" rel="nofollow">knockoutjs</a> with <a href="http://masonry.desandro.com/" rel="nofollow">masonry</a> and have created a custom knockout binding handler to apply masonry to a html element.</p>
  
  <p>The container I want to apply masonry to has it's content injected dynamically using knockout's <code>foreach</code> binding.</p>
  
  <p>The issue I am having is getting masonry to apply itself after the masonry container has been updated dynamically.</p>
  
  <p>In the snippet example if you click the <em>masonryize</em> button then it will <em>destroy</em> the masonry container and reapply mansonry, how do I get this behaviour into my binding handler?</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>ko.bindingHandlers.masonry = {
    update: function(element, valueAccessor) {
      var options = valueAccessor();
      $(element).masonry(options);
    }
  
  }
  
  var vm = {
    term: ko.observable(),
    page: ko.observable(1),
    per_page: ko.observable(3),
    items: ko.observableArray(),
    masonryize: function() {
      $('.grid').masonry('destroy');
      $('.grid').masonry({
        itemSelector: '.item',
        columnWidth: 200
      });
    },
    getStuff: function() {
      $.ajax({
        url: 'https://api.github.com/search/repositories',
        method: 'GET',
        data: {
          q: this.term,
          page: this.page(),
          per_page: this.per_page()
        }
      }).then(function(r) {
        this.items(r.items)
      }.bind(this))
    }
  }
  
  ko.applyBindings(vm);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    width: 400px;
  }
  .item {
    margin-bottom: 2em;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://masonry.desandro.com/masonry.pkgd.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;div&gt;
    &lt;label&gt;term:&lt;/label&gt;
    &lt;input type="text" data-bind="value: term" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label&gt;page:&lt;/label&gt;
    &lt;input type="text" data-bind="value: page" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label&gt;no of items:&lt;/label&gt;
    &lt;input type="text" data-bind="value: per_page" /&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;button data-bind="click: getStuff"&gt;get stuff&lt;/button&gt;
    &lt;button data-bind="click: masonryize"&gt;masonryize&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="grid" data-bind="masonry: {itemSelector: '.item', columnWidth: 200}, foreach: items"&gt;
    &lt;div class="item"&gt;
      &lt;p data-bind="text:name"&gt;&lt;/p&gt;
      &lt;p data-bind="text:language"&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>