砌体不是Ember Cli的功能

Question

如何在Ember-Cli中启动jQuery插件？

我正在尝试使用Masonry plugin，这是我想要实现的逻辑

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
}); 

我正在尝试使用名为didInsertElement的事件挂钩，但jQuery插件不会启动。

这是我的代码

import Ember from 'ember';

var PhotographyController = Ember.ObjectController.extend({
    didInsertElement : function(){
      this._super();
      Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },

    afterRenderEvent : function(){
      var $grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        percentPosition: true,
        columnWidth: '.grid-sizer'
      });
      // layout Isotope after each image loads
      $grid.imagesLoaded().progress( function() {
        $grid.masonry();
      });  
    }
});

export default PhotographyController;

控制台错误“砌体不是功能”

如何启动插件并实现此逻辑？

我正在使用Ember 1.3.11

Answer 1

显然有人已经围绕Masonry as an ember addon做了一些事情。

要尝试回答您的问题，首先您必须检查您的应用程序中是否包含Masonry文件。 在ember-cli-build.js中你应该有以下几点：

app.import('bower_components/mansonry/dist/masonry.min.js');

请注意我为此制定了路径，您需要确保路径对于您的项目是正确的。在这里，我假设您将使用bower来管理依赖项。因此，您需要在bower.json文件中添加类似内容（然后运行bower install）。

"masonry": "~3.3.2",

如果你想在Ember组件中使用jQuery（这是我认为你需要的）。您应该执行以下操作：

//components/masonry-component.js
export default Ember.Component.extend({
  didInsertElement() {
   var $grid = this.$('.grid').masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer'
  });
   // layout Isotope after each image loads
   $grid.imagesLoaded().progress( function() {
     $grid.masonry();
   });  
  }
});

请注意this.$('.grid')的使用，这意味着您使用的jquery选择器仅开始在组件的上下文中搜索元素（这样您就可以拥有多个组件而不会相互干扰）。 在您的组件模板中，使用grid类：

的div

<div class='grid'>
  {{yield}}
</div>

在您的路线模板中，您将拥有：

{{masonry-component}}