如何将 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
route
、controller
和模板的代码。
您只需要组件中的一行即可 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
});
我处于需要将商店注入我的组件的情况,至少我认为这是我的需要。
情况是这样的:
我有组件,代码本身并不重要,但我粘贴它以便更好地理解:
//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 中我可以访问模块 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
route
、controller
和模板的代码。
您只需要组件中的一行即可 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
});