how to integrate jquery-masonry with ember.js?

Question

I'm currently busy learning ember.js and I'm wondering how best to use masonry with ember. I can't find any good howtos. Anyone have a few tips?

Answer 1

I did a very rough integration for a prototype. The code below is a good starting point, but more work will be needed depending upon how users interact with the content.

This assumes you've already got a working ember page with an ArrayController ready to render.

Here is the View that utilizes masonry:

App.HomeView = Ember.View.extend({

  onDidInsertElement: function() {
    this.reMason();
  }.on('didInsertElement'),

  onWillDestroy: function() {
    this.$('.masonry').masonry('destroy');
  }.on('willDestroy'),

  reMason: function() {
    this.$('.masonry').masonry({
      // masonry init options here
    });
    this.$('.masonry').imagesLoaded( function() {
      this.$('.masonry').masonry();
    }.bind(this));
  }

});

Here is the template where we render the masonry html

<script type="text/x-handlebars" data-template-name="homeView">
  ...
    <div class="masonry">
      {{#each}}
        // render each masonry item here.
      {{/each}}
    </div>
  ...
</script>