Ember-cli, Masonry, Isotope, Packery. How to use?

问题

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

How to start?

I writed in terminal:

bower install isotope --save

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'
});

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.

What to do?

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

回答1:

You should create a component:

ember g component isotope-grid

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'
      });
    }
})

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

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

来源：https://stackoverflow.com/questions/32823929/ember-cli-masonry-isotope-packery-how-to-use