如何在Ember中使用Packery

时间:2019-02-13 10:56:39

标签: javascript ember.js packery

我刚刚开始ember,想使用packery作为布局库。 ember应用已通过ember new wep-app创建。 Packery已通过npm install packery安装。根据{{​​3}},我可以通过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 dependency management中,有人提到了组件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。

编辑:用于包装厂的余烬组件为question,效果不佳。

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

像packery一样是jQuery插件,而不是模块。通常是导入模块。

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

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