Question

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

情况就是这样：

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

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

Answer 1

组件中只需要一行到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
});

Answer 2

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

只需将img Model实例或imgLink字符串传递给您的组件：

{{masonry-plugin model=model}}

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

如果这样做无效，请尝试使用ember-twiddle或至少代码photography route，controller和模板提供简单示例。

如何将Store注入我的ember组件

2 个答案: