Masonry 不是 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;

控制台错误"Masonry is not a function"

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

我正在使用 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 选择器仅开始搜索组件上下文中的元素（这样您就可以拥有多个组件而不会干扰每个组件其他）。在您的组件模板中 div 和 grid class:

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

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

{{masonry-component}}

Masonry 不是 Ember Cli 中的函数

Masonry is not a function in Ember Cli

javascript

jquery

jquery-masonry

ember.js

ember-cli