如何将jquery-masonry与ember.js集成?

时间:2014-02-14 12:45:31

标签: ember.js jquery-masonry

我目前正在忙着学习ember.js,我想知道如何最好地使用砌体砌筑。我找不到任何好的howtos。任何人都有一些提示?

1 个答案:

答案 0 :(得分:2)

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

这假设您已经有一个工作的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>