2

初めての Ember アプリケーションを作成していますが、どうにかして正しく動作させることができません。

私のサイトでは、テンプレートはアプリケーション テンプレートのアウトレットでレンダリングされます。次に、さまざまなサイトへのルートがいくつかあります。サイトごとにタイトルが異なります。アプリケーション テンプレートには、このタイトルのプレースホルダーがあります。

しかし、基になるサイト コントローラー (インデックス、概要など) に関連する特定のタイトルを表示するにはどうすればよいでしょうか。

私はここでこれを見つけました:ember.jsでページタイトルを設定していますが、私には合いません。これを行う適切な方法はありますか?それとも、h1 タグに id を付けて jQuery で設定する必要がありますか?

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

4

2 に答える 2

2

テンプレートのコンテキストの title プロパティを設定する必要があります。アプリケーション テンプレートの場合、これは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;
  }
});

そのため、ルートで 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 に答える