将不同路由的值绑定到 application.hbs

Question

在Ember.js（版本2.5.1）中，我的application.hbs中有以下代码:

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            {{title}}<small>{{description}}</small>
        </h1>
    </section>
    <section class="content">
        {{outlet}}
    </section>
</div>

我应该在哪里声明 {{title}} 和 {{description}} 属性，以便它们可以根据当前路由进行更改？我想生成一个适用于索引路由的应用程序控制器 (ember g controller application)，但是，如果我导航到应用程序中的其他路由，我将无法更改这些属性。

Answer 1

我会这样设计我的application.hbs

    {{partial "app_navbar"}}
        <div class="container">
           {{outlet}}
        </div>
    {{partial "app_footer"}}

并创建依赖于路由的 header 我会制作一个组件 content-header

templates/components/content-header.hbs

<div class="content-header">
   <h1> {{params.title}} - <small> {{params.description}} </small> </h1>
</div>

并在您自定义路线的控制器中

export default Ember.Controller.extend({
    navbarParams: {
       title: 'Foo',
       description: 'Bar'
    }
});

并在您的自定义路线模板中

{{content-header params=navbarParams}}

{{! Your other content here}}

将不同路由的值绑定到 application.hbs

bind values to application.hbs from different routes

javascript

handlebars.js

ember.js