如何将 jquery-masonry 与 ember.js 集成？答案

【问题标题】：how to integrate jquery-masonry with ember.js?如何将 jquery-masonry 与 ember.js 集成？
【发布时间】：2014-02-14 12:45:31
【问题描述】：

我目前正忙于学习 ember.js，我想知道如何最好地使用 ember 和 masonry。我找不到任何好的方法。谁有一些建议？

【问题讨论】：

我的回答是否有助于为您指明正确的方向？
非常感谢。我现在已经取得了一些进展。

标签： ember.js jquery-masonry

【解决方案1】：

我为原型做了一个非常粗略的集成。下面的代码是一个很好的起点，但根据用户与内容的交互方式，还需要做更多的工作。

这假设您已经有了一个可以工作的 ember 页面，其中包含准备好呈现的 ArrayController。

这是利用砌体的视图：

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));
  }

});

这是我们渲染砌体 html 的模板

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

【讨论】：