如何将 Store 注入我的 ember 组件

How to inject the Store to my ember component

我处于需要将商店注入我的组件的情况,至少我认为这是我的需要。

情况是这样的:

我有组件,代码本身并不重要,但我粘贴它以便更好地理解:

//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();
    });  
  }
});

这是他自己的模板

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

此模板由 {{masonry-plugin}}

导入另一个模板 photography.hbs

问题是,因为在 photography.hbs 中我可以访问模块 imgLink,因为在路由 photography.js 中我创建了使用 Flickr API 的模块,我怎样才能使 {{masonry-plugin}} 中的模板也可以访问该模块?

希望解释清楚

这里还有模型img说明一下

var img = DS.Model.extend({
    imgLink: DS.attr('string')
});

首先,为此您不需要组件中的商店。

只需将 img 模型实例或 imgLink 字符串传递给您的组件即可:

{{masonry-plugin model=model}} 

(这取决于您的调用上下文中是否有 img

如果这没有帮助,请尝试提供一个带有 ember-twiddle 的简单示例,或者至少提供您的 photography routecontroller 和模板的代码。

您只需要组件中的一行即可 inject 在其中存储或其他服务:

import Ember from 'ember';
const { service } = Ember.inject;

export default Ember.Component.extend({
    store: service(),
    foo: service('store') // if you dont want to name property same as service
});