如何使用Ember的Packery

Question

我刚开始使用ember并希望使用packery作为布局库。 ember应用程序是通过ember new wep-app创建的。 Packery已经通过npm install packery安装。根据ember dependency management，我可以通过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>

但它似乎不起作用。在一个类似的qazxsw poi中，有人提到了一个组件qazxsw poi的创建，应该相应地填充

question

使用组件，ember g component packery-grid模板应如下所示：

import Component from '@ember/component';

export default Component.extend({
   classNames: ['grid'], 
   didInsertElement() {
   this.$('.grid').packery({
       // options
       itemSelector: '.grid-item'
       });
   }
 }); 

但是，这也不起作用。如何将包装整合到余烬中我该怎么办？我使用的是ember 3.5.1。

编辑：有一个用于包装的余烬组件为application.hbs，它不起作用。

Answer 1

1. 看看packery的github，我认为

   {{#packery-grid}}
   <div class="grid-item">cdsc</div>
   <div class="grid-item grid-item--width2">...</div>
   <div class="grid-item">...</div>
   {{/packery-grid}}

   是一条错误的道路。正确的应该是well。您需要在此更改后重新启动node_modules/packery/js/packery.js才能重建js
2. 您可能需要用node_modules/packery/dist/packery.pkgd.js替换ember serve

Answer 2

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

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

但我强烈建议你查看css网格，而不是使用packery。 jQuery和jQuery插件是不符合人体工程学的