如何与Ember一起使用Packery

Question

我刚开始使用帕克利作为布局库。余烬应用程序已经通过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}}

然而，这也不起作用。我该怎么做才能将包装材料集成到ember中呢？我使用余烬3.5.1。

编辑：有一个成员组件的包装作为井，这也不起作用。

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.$()

Answer 2

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

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

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