2

我正在构建我的第一个 Ember 应用程序，但不知何故我无法让它正常工作。

在我的站点模板中呈现在应用程序模板的出口。然后有一些通往不同站点的路线。每个站点都有不同的标题。应用程序模板有一个此标题的占位符。

但是如何显示与底层站点控制器相关的特定标题（索引、关于、...）？

我在这里找到了这个：使用 ember.js 设置页面标题，但它不适合我。有正确的方法吗？还是我真的必须给我的 h1 标签一个 id 并用 jQuery 设置它？

jsbin：http: //jsbin.com/ucanam/1912/edit

4

2 回答 2

2

您需要设置模板上下文的标题属性。对于应用程序模板，这是App.ApplicationController.

App.IndexRoute = Ember.Route.extend({
  activate: function() {
    this.controllerFor('application').set('title', "Home");
  }
});

要同时设置文档标题，您只需添加一个观察者即可在标题更改时触发。

App.ApplicationController = Ember.Controller.extend({
  titleDidChange: Ember.observer(function(){
    document.title = this.get('title');
  }, 'title')
});

http://jsbin.com/ucanam/1921/edit

于 2013-10-30T15:57:08.013 回答
2

如果要更改所有路线的标题，可以重新打开Ember.Route课程：

Ember.Route.reopen({
  activate: function() {
    this._super.apply(this, arguments);
    var title = this.get('title') || '';
    document.title = title;
  }
});

因此，在您的路线中定义一个标题属性，将document.title在转换到该路线时进行更改。

例如：

App.IndexRoute = Ember.Route.extend({
  title: 'index' // changes the title to index
});

App.FooRoute = Ember.Route.extend({
  title: 'foo'  // changes the title to foo
});

App.BarRoute = Ember.Route.extend({
  title: 'bar'  // changes the title to bar
});

App.NotitleRoute = Ember.Route.extend({}); // don't change the title

观察：这个实现没有绑定意识

请看一下。源代码http://jsbin.com/ucanam/1918/edit。嵌入式演示http://jsbin.com/ucanam/1918

于 2013-10-30T16:05:01.030 回答