如何将 Packery 与 Ember 一起使用

Question

我刚开始 ember 并想使用 packery as layouting library. The ember app has been created via ember new wep-app. Packery has been installed via npm install packery. According to ember dependency management，我可以通过 app.import('node_modules/packery/js/packery.js')

加载 Packery

我现在如何使用 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>

不过好像不行。在类似的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'
       });
   }
 });

使用组件，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}}

但是，这也不起作用。如何将 packery 集成到 ember 中？我使用 ember 3.5.1.

编辑：有一个 ember 包装组件作为 well，它也不起作用。

Answer 1

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

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

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

Answer 2

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

如何将 Packery 与 Ember 一起使用

How to use Packery with Ember

javascript

ember.js

packery