将jquery Isotope库与ember-cli一起使用

Question

我正在尝试在我的应用程序中使用Isotope库；我已经创建了一个组件来激活它：

export default Ember.Component.extend({
    didInsertElement: function() {
        Ember.run.next(this, function(){
            var $container = $('#container');
            // init
            $('#container').isotope({
                // options
                itemSelector: '.item',
                layoutMode: 'fitRows'
            });
        });
    }
});

运行这个，我得到一个错误，说“未定义的不是一个函数”，相对于同位素调用。

尝试在ember-cli之外复制此错误时，我发现当同位素脚本包含在jquery之前时就会发生此错误；

在ember-cli中，我使用Brocfile中的app.import导入同位素脚本：

app.import('bower_components/isotope/dist/isotope.pkgd.js');

有没有人成功地将jquery Isotope与ember-cli一起使用？

Answer 1

我知道这是旧的，但我将添加它，以便它可能会帮助某人....

通过bower安装

    bower install isotope --save

或通过npm

    npm install isotope-layout

将此代码添加到ember-cli-build.js文件中

    app.import('bower_components/isotope/dist/isotope.pkgd.min.js');

创建新组件

    ember g component isotope-grid

将此代码添加到Component.extend中的component.js

classNames: ['isotope-grid'],

didInsertElement() {
  this.$().isotope({
    itemSelector: 'li',
    layoutMode: 'fitRows'
  });
}

现在，只要网格是一个具有同位素网格类的ul，您就应该可以开始工作了。