ember.js - Ember 路由器和控制器

Question

我尝试从 Ember 指南中获取示例，但我不明白：

window.App = Ember.Application.create()

App.Router.map ->
  this.route("about");
  this.route("favorites", { path: "/favs" })

App.IndexRoute = Ember.Route.extend({
  setupController: (controller) ->
    controller.set('title', "My App")
});

模板：

<h1>{{title}}</h1>
<nav>
  {{#linkTo "index"}}Index{{/linkTo}}
  {{#linkTo "about"}}About{{/linkTo}}
  {{#linkTo "favorites"}}Favorites{{/linkTo}}
</nav>

据我了解，当我到达索引页面时，它应该显示标题，但没有任何反应。所以有些人可以看到这里出了什么问题。

Answer 1

您在 中设置title属性IndexController，但您的模板似乎不是index模板，而是application模板。您可以更改您IndexRoute的使用controllerFor，以便您可以访问ApplicationController（自动生成）并为属性设置一个值，类似于以下内容：

App.IndexRoute = Ember.Route.extend
  setupController: (controller) ->
    @controllerFor('application').set('title', 'My App')

（见小提琴）

或者你可以直接在ApplicationRoute：

App.ApplicationRoute = Ember.Route.extend
  setupController: (controller, model) ->
    controller.set('title', 'My App')

（见小提琴）

Answer 2

好的，这句话在这里似乎很重要：

IndexController 是索引模板的起始上下文

所以{{title}}必须在索引模板中：

script(type="text/x-handlebars")

    <nav>
    {{#linkTo "index"}}Index{{/linkTo}}
    {{#linkTo "about"}}About{{/linkTo}}
    {{#linkTo "favorites"}}Favorites{{/linkTo}}
    </nav>
    {{outlet}}

script(type="text/x-handlebars", data-template-name="index")
    <h1>{{title}}</h1>