Masonry 不是 Ember Cli 中的函数
Masonry is not a function in Ember Cli
如何在 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
显然有人已经围绕 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}}
如何在 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
显然有人已经围绕 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}}