我刚刚开始ember,想使用packery作为布局库。 ember应用已通过ember new wep-app
创建。 Packery已通过npm install packery
安装。根据{{3}},我可以通过app.import('node_modules/packery/js/packery.js')
我现在如何使用包装纸? application.hbs
看起来像这样
<div class="grid">
<div class="grid-item">cdsc</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
</div>
但似乎不起作用。在类似的ember dependency management中,有人提到了组件ember g component packery-grid
的创建,该组件应相应地填充
import Component from '@ember/component';
export default Component.extend({
classNames: ['grid'],
didInsertElement() {
this.$('.grid').packery({
// options
itemSelector: '.grid-item'
});
}
});
使用application.hbs
模板,该组件应如下所示:
{{#packery-grid}}
<div class="grid-item">cdsc</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
{{/packery-grid}}
但是,这也不起作用。将包装材料整合到灰烬中我该怎么办?我使用的是余烬3.5.1。
编辑:用于包装厂的余烬组件为question,效果不佳。
答案 0 :(得分:2)
node_modules/packery/js/packery.js
是错误的路径。正确的应该是node_modules/packery/dist/packery.pkgd.js
。进行此更改后,您需要重新启动ember serve
才能重建js this.$('.grid')
替换为this.$()
答案 1 :(得分:0)
像packery一样是jQuery插件,而不是模块。通常是导入模块。
对于jQuery插件,您需要将它们加载到脚本标签中,可能从供应商或公用文件夹中加载。 (我不知道您是否可以使用来自node_modules的HTML中的脚本标签)
但我强烈建议您检查CSS网格,而不要使用包装纸。 jQuery和jQuery插件不符合人体工程学