Ember-cli，砌体，同位素，包装。如何使用？答案

【问题标题】：Ember-cli, Masonry, Isotope, Packery. How to use?Ember-cli，砌体，同位素，包装。如何使用？
【发布时间】：2015-09-28 13:13:27
【问题描述】：

我需要在我的 ember-cli 项目中使用它们。

如何开始？

我在终端写了：

bower install isotope --save

然后在我的 ember-cli-build.js 中添加了app.import ecc...，但后来我不知道该怎么做。

把我的初始化脚本放在哪里，像这样：

$('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

如果我把它放在 application.hbs 中，它会给我一个错误，当我用 {{#link-to}} 更改路由时，它就不再起作用了。

怎么办？

在网络上没有很多关于这方面的资源。

【问题讨论】：

标签： ember.js ember-cli jquery-isotope jquery-masonry packery

【解决方案1】：

你应该创建一个组件：

ember g component isotope-grid

然后，在组件的 didInsertElement 钩子中，您应该在组件的 jQuery 元素上调用 isotope：

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['grid'], 

    didInsertElement() {
      this.$().isotope({
        // options
        itemSelector: '.grid-item',
        layoutMode: 'fitRows'
      });
    }
})

然后，不要使用<div class="grid"></div>，而是使用：

{{#isotope-grid}}
  ... HTML goes here
{{/isotope-grid}}

【讨论】：

亲爱的@Daniel，要结束这个问题，我想知道如何在 Ember 中重现这个（codepen.io/desandro/pen/aGvIq），因为按照你的回答，我有这个错误：Uncaught TypeError: this.$ is not a function 如果我使用这个代码：didInsertElement() { this.$().packery({ itemSelector: '.itemPack', gutter: 20 }); this.$().find('.itemPack').each( function( i, itemElem ) { var draggie = new Draggabilly( itemElem ); // bind Draggabilly events to Packery this.$().packery( 'bindDraggabillyEvents', draggie ); });
这是什么意思：this.$() 在你的代码中？为什么我必须使用它？