如何在Ember中使用Packery

Question

我刚刚开始使用ember，并希望使用packery作为布局库。 ember应用已通过ember new wep-app创建。 Packery已通过npm install packery 。 根据余烬依赖管理 ，我可以通过app.import('node_modules/packery/js/packery.js')加载Packery

我现在如何使用包装纸？ 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 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。

编辑 ：对于packery灰烬成分为好 ，不正常工作。

Answer 1

1. 看看packery的github，我认为node_modules/packery/js/packery.js是错误的路径。 正确的应该是node_modules/packery/dist/packery.pkgd.js 。 您需要在此更改后重新启动ember serve才能重建js
2. 您可能需要用this.$('.grid')替换this.$('.grid') this.$()

Answer 2

看起来packery是jQuery插件，而不是模块。 通常是导入模块。

对于jQuery插件，您需要将它们加载到脚本标签中，可能从供应商或公共文件夹中加载。 （我不知道您是否可以使用来自node_modules的HTML中的脚本标签）

但我强烈建议您检查CSS网格，而不要使用包装纸。 jQuery和jQuery插件不符合人体工程学