如何在路由中设置变量并在模板中显示？

Question

我想为每个设置为文本的页面设置一个变量，以显示为动态 header 之类的东西。我如何在路由中设置变量并将其显示在相应的模板中？到目前为止，我尝试过的一切都不起作用。

Answer 1

您只能使用 model 挂钩将路由变量传递给模板。但是，model 只被调用一次。为了更新路由变量并在模板中查看其最终值，您需要 wrap 变量。之后，需要更新wrapped里面的变量，wrapped的引用不会改变。您的代码将类似于：

route.js:

model(){
    this._super(...arguments);
    this.set('myWrappedVariable', {myVariable: 1});
    let modelResult = {myWrappedVariable: this.get('myWrappedVariable')};

    return modelResult;
},

actions:{
    increaseVariables(){
        Ember.set(this.get('myWrappedVariable'), 'myVariable', this.get('myWrappedVariable.myVariable')+1);
    }
}

template.hbs

myWrappedVariable: {{model.myWrappedVariable.myVariable}}

Take a look at this twiddle 此用法。

Answer 2

路由中模板的上下文是它的控制器，而不是它的路由。尝试将操作移至控制器。

查看更新的旋转：https://ember-twiddle.com/b454e10355ae8c708c3b8dc24b51e44e?openFiles=controllers.my-route.js%2C

有关控制器的更多信息：https://guides.emberjs.com/v2.16.0/controllers/

Answer 3

@Gaurav 的回答完全正确，应被视为最佳实践。但是，如果您有充分的理由在路由中设置一个不是模型的变量，则可以使用 setupController hook 因此：

import Route from '@ember/routing/route';

export default Route.extend({
  setupController(controller, model) {
    // Call _super for default behavior
    this._super(controller, model);

    // Set a variable on controller
    controller.set('foo', 'bar');
  }
});

如 api 文档中所示，您还可以使用 setupController 通过使用 controllerFor 方法获取变量的实例来在另一个控制器上设置变量。但是我不认为这是一个好的做法，因为如果在整个应用程序中没有很好地记录它，那么维护这样的代码是非常困难的。

如@Ahmet Emre Kılınç 的回答所示，您也可以使用散列作为模型。如果它的至少一个属性是 Promise，你应该 return a RSVP.hash(). Otherwise model hook 在 Promise 完成之前不会阻止转换。

如何在路由中设置变量并在模板中显示？

How do you set variable in route and display in template?

ember.js

ember-cli