灰烬-cli，石工，同位素，包装厂。如何使用？ [英] Ember-cli, Masonry, Isotope, Packery. How to use?

问题描述

我需要在ember-cli项目中使用它们。

I need to use them in my ember-cli project.

如何开始？

I在终端中写入：

安装同位素--save

然后在我的 ember-cli-build.js 中添加了 app.import ecc ... ，但是后来我不知道

then in my ember-cli-build.js I added app.import ecc..., but then I don't know what to do.

将初始化脚本放在哪里，像这样：

Where to put my intialization script, like this:

$('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

如果我将其放入 application.hbs ，则会给我一个错误并且当我使用 {{＃link-to}} 更改路线时，它不再起作用。

If I put it in application.hbs it give to me an error and when i change route with {{#link-to}} it doesn't work anymore.

什么

在网络上没有很多资源。

In the web there aren't many resources about this.

推荐答案

您应该创建一个组件：

琥珀色的组件同位素网格

然后，在组件的 didInsertElement 挂钩中，应在组件的jQuery元素上调用同位素 ：

Then, in component's didInsertElement hook you should call isotope on component's jQuery element:

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['grid'], 

    didInsertElement() {
      this.$().isotope({
        // options
        itemSelector: '.grid-item',
        layoutMode: 'fitRows'
      });
    }
})

然后，而不是使用< div class = grid> ;< / div> ，使用：

Then, instead of using <div class="grid"></div>, use:

{{#isotope-grid}}
  ... HTML goes here
{{/isotope-grid}}

这篇关于灰烬-cli，石工，同位素，包装厂。如何使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！