javascript - 如何将 Packery 与 Ember 一起使用

Question

我刚刚启动 ember 并想使用 packery作为布局库。 ember 应用程序是通过 ember new wep-app 创建的。 Packery 已通过 npm install packery 安装。根据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。

编辑:packery 有一个 ember 组件，如 well ，效果不太好。

Answer 1

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