Question

请跟我说，我是新人。

一直在为这个问题而烦恼，并将其作为最后的手段。它是关于如何在该路线加载时访问模型的数据。例如，当/ meal / 2加载时，我想要一个运行的函数，它使用该模型的背景图像字符串属性设置文档的背景。或者当/ meal加载时，使用集合的第一项属性的函数。

任何关于＆＃39; ember方式的帮助＆＃39;要做到这一点将非常感激。

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

路由/ menu.js

export default Ember.Route.extend({
  model: function() {
    return this.store.find('menu');
  },
  afterModel: function() {
    Ember.$(document).anystretch('temp-images/bg-1.png');
  }
});

例如，我想在routes / menu.js中做的是让模型提供该图像网址。

Answer 1

如果我误解了某些事情，请纠正我，你要做的是：

根据找到的属性更改DOM元素的背景图像在每个模型的记录中。

模型加载是一种异步操作，您希望在确定加载数据后进行图像交换。您使用Example: N = 15.00 Elements = { 0.10, //EDIT: This shouldn't be here 7.00, 7.00, 14.10, 15.90, } Solutions = { 0.10 + 7.00 + 7.00, //EDIT: This shouldn't be here 14.10, 15.90, } Final Solution = {14.10} // or 15.90挂钩来保证，但这还不够。
您想修改模板中的DOM，但需要确保已呈现模板。因此，DOM操作逻辑不是将其放在afterModel中，而是属于Views所具有的afterModel事件。

我建议您使用一个组件（它也是一个视图），例如：

didInsertElement

当然，您无法复制任何粘贴。它只是向您展示了如何根据模型的属性修改模板的主要机制。

Answer 2

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

如何在路由器/控制器中访问模型数据？

2 个答案: