Javascript 砌体不是Ember Cli中的功能

如何在Ember Cli中启动jQuery插件

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

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

显然有人已经做了一些事情

要尝试回答您的问题，首先您必须检查您的应用程序中是否包含砌体文件。 在

ember cli build.js

中，您应该具有以下内容：

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

请注意，我为此创建了路径，您需要确保该路径适合您的项目。在这里，我假设您将使用bower来管理依赖关系。因此，您需要在

bower.json

文件中包含类似的内容（然后运行

bower安装

）

如果您想在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

class的div：

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

---

显然有人已经做了些什么

要尝试回答您的问题，首先您必须检查您的应用程序中是否包含砌体文件。 在

ember cli build.js

中，您应该具有以下内容：

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

请注意，我为此创建了路径，您需要确保该路径适合您的项目。在这里，我假设您将使用bower来管理依赖关系。因此，您需要在

bower.json

文件中包含类似的内容（然后运行

bower安装

）

如果您想在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

class的div：

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

---

您是否尝试将afterRenderEvent函数实现作为Ember.run.scheduleOnce函数的最后一个参数，而不是作为参数传递？您的意思是Ember.run.scheduleOnce（'afterRender'，this，function（）{var$grid=$（'.grid'）({itemSelector:'.grid item'，percentPosition:true，columnWidth:'.grid sizer'}）；//在每个图像加载$grid.imagesLoaded（）.progress（function（）{$grid.massy（）；}）；}之后的布局？它不工作控制器没有访问DOM的权限，因此它们没有

didInsertElement

hook方法。邮政编码正确吗？它看起来像组件中的某个东西。是的，我创建了组件，然后在回答中使用了，但我仍然得到控制台错误“UncaughtTypeError:this.$（…）。Mashise不是一个函数”您是否尝试将afterRenderEvent函数实现作为Ember.run.scheduleOnce函数的最后一个参数，而不是作为参数传递？您的意思是Ember.run.scheduleOnce（'afterRender'，this，function（）{var$grid=$（'.grid'）({itemSelector:'.grid item'，percentPosition:true，columnWidth:'.grid sizer'}）；//在每个图像加载$grid.imagesLoaded（）.progress（function（）{$grid.massy（）；}）；}之后的布局？它不工作控制器没有访问DOM的权限，因此它们没有

didInsertElement

hook方法。邮政编码正确吗？它看起来像是一个组件中的某个东西。是的，我创建了这个组件，然后像在回答中一样，但我仍然得到控制台错误“UncaughtTypeError:this.$（…）.Massey不是一个函数”这些正是我所做的所有步骤，在我的dist中的vendor.js中，我可以看到它已编译，唯一的区别是我使用的是“Massey”：“~4.0.0”，我仍然在控制台中看到未捕获的TypeError:this.$（…）.Massey不是一个函数，我不知道我还需要检查什么，我尝试整理它并给你答案，尽管我仍然使用brocfile.js，这里是我的导入应用程序.import（'bower_components/Masses/dist/Massey.pkgd.min.js'）；我得试试。你能做一个github回购来重现这种情况吗？是的，当然，检查我的最后一次提交，你会看到最后一次更改，就像在你的回答中一样抱歉，我试着运行它，但我不断得到：

无法读取未定义类型的属性“displayHost”错误：无法读取/Users/useruser/code/Portfolio/node_modules/ember cli/lib/tasks/server/express server.js:179:70未定义类型的属性“displayHost”。这些正是我所做的所有步骤，在我的dist中的vendor.js中，我可以看到它被编译，唯一的区别是我使用的是“Mashise”：“~4.0.0”，我仍然在控制台中看到Uncaught TypeError:this.$（…）。Mashise不是一个函数，我不知道我还需要检查什么，我尝试对它进行排序并给出答案，尽管我仍然在使用brocfile.js，这里是我的导入应用程序.import（'bower_components/massy/dist/massy.pkgd.min.js'）；我必须试一试。你能做一个github repo来重现这种情况吗？是的，当然，检查我的上一次提交，你会看到最后的更改，就像你的回答一样抱歉，我试着运行它，但我不断得到：
无法读取未定义类型的属性“displayHost”错误：无法读取未定义at/Users/useruser/c的属性“displayHost”ode/Portfolio/node_modules/ember cli/lib/tasks/server/express server.js:179:70
。