How to inject the Store to my component

Ember CLI
1

I am in the situation where i need to inject the store to my component , at least i think this is my need.

This is the situation:

I have component , the code itself does not really matter but i paste it for better understanding:

//components/masonry-plugin.js
import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },

  afterRenderEvent : function(){
    var $grid = this.$('.grid').masonry({
      itemSelector: '.grid-item',
      percentPosition: true,
      columnWidth: '.grid-sizer'
    });
    // layout Isotope after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.masonry();
    });  
  }
});

This is his own template

<div class="grid">
    <div class="grid-sizer"></div>
    {{#each model}}
        <div class="grid-item">
          <img {{bind-attr src=imgLink}}>
        </div>
     {{/each}}
</div>

This template is imported in an other template photography.hbs by {{masonry-plugin}}

The question is, since in photography.hbs i have access to the module imgLink, because in the route photography.js i create the module consuming the Flickr API, how can i make the modules accessible also to the template in {{masonry-plugin}} ?

Hope the explanation is clear

Here also the model img for clarification

var img = DS.Model.extend({
	imgLink: DS.attr('string')
});
2 
//components/masonry-plugin.js
import Ember from 'ember';

export default Ember.Component.extend({
  store: Ember.inject.service(),
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },

  afterRenderEvent : function(){
    var $grid = this.$('.grid').masonry({
      itemSelector: '.grid-item',
      percentPosition: true,
      columnWidth: '.grid-sizer'
    });
    // layout Isotope after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.masonry();
    });  
  }
});

Now your component has access to the store via this.store

3

Just a clarification on @jhliberty 's answer: I believe this.get('store') is the way to access the store in these cases.

1 Like
4

Thanks for the correction!

1 Like