如何在路由器/控制器中访问模型数据？
如何在路由器/控制器中访问模型数据？
提问于 2015-05-15 19:49:21
请容忍我，我是新来的。
一直在为这个问题绞尽脑汁，作为最后的手段。它是关于如何在该路由加载时访问模型的数据。例如，当/燃料/2加载时，我希望运行一个函数，该函数使用模型的背景-图像字符串属性设置文档的背景。或者当/meals加载时，使用集合第一项的属性的a函数。
任何帮助‘余烬的方式’来做这将是非常感谢。
Menu.hbs
{{#each meal in model}}
<span {{action 'mealSelected' meal.image_large}}>
{{#link-to 'menu.meal' meal tagName="li" class="meal-block" href="view.href"}}
[...]
{{/link-to}}
</span>
{{/each}}
<div id="meal-info-wrapper">
{{outlet}}
</div>型号：
export default DS.Model.extend({
name: DS.attr('string'),
image: DS.attr('string')
});Router.js
export default Router.map(function() {
this.route('about');
this.route('menu', { path: '/' }, function() {
this.route('meal', { path: '/meal/:id/:slug' });
});
});路线/班次
export default Ember.Route.extend({
model: function() {
return this.store.find('menu');
},
afterModel: function() {
Ember.$(document).anystretch('temp-images/bg-1.png');
}
});例如，我在路由/menu.js中想要做的就是让模型提供图像url。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-16 04:45:15
afterModel将只在模型被解析后运行，并且模型作为参数传递。因此，根据我对应用程序的理解，您可以将routes/menu示例调整为：
export default Ember.Route.extend({
model: function() {
return this.store.find('menu');
},
afterModel: function(model) {
Ember.$(document).anystretch(model.get('firstObject.image'));
}
});Stack Overflow用户
发布于 2015-05-15 22:38:44
如果我误解了什么，你想做的是：
根据每个模型记录中的属性更改DOM元素的背景图像。
- 模型加载是一种异步操作，一旦确定数据被加载，您就想要进行图像交换。您使用了
afterModel钩子来保证这一点，但这还不够。 - 您希望修改模板中的DOM，但需要确保模板已被呈现。因此，DOM操作逻辑不是放在
afterModel中，而是属于视图所拥有的didInsertElement事件。
我建议您使用组件(它也是视图)，如下所示：
// your template
{{#each meal in model}}
{{meal-component content=meal}}
{{/each}}
// the meal-component
didInsertElement: function() {
var imgURLProperty = this.get('content.imgURLProperty');
Ember.$(document).anystretch(imgURLProperty);
}当然，你不能复制粘贴的任何东西。它只是向您展示了如何根据模型的属性修改模板的主要机制。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30267659
复制相关文章
相似问题
腾讯云开发者
