22

ページのタイトルを設定して、URL間を移行するときに、タイトルが新しい状態を反映するようにするための最良の方法は何ですか？これを行うようにルーターを設定する方法はありますか？

状態ごとにページタイトルスキーマを設定できるメソッドが必要です。したがって、ルートにパラメータがある場合、それらはpageTitleに渡されます。

sessions : Ember.Route.extend({
       route:"/sessions",
       connectOutlets : function(router) {
           //...
       },
       pageTitle:function(){
            return "Sessions";
       },
   })

このタイプの機能をモデルまたは他の場所に実装するのが最善の方法について、私はどんな提案も受け入れます。

4

7 に答える 7

19

前の回答は、古いバージョンのEmberに当てはまりました。いくつかの変更の後、フレームワークはバージョン1.0 RC2に到達し、最終版に近づいているので、この回答を更新することにしました。

例として、このフィドルで定義されているルートを調べてください：http: //jsfiddle.net/schawaska/dWcUp/

考え方は前の回答と同じですが、ルーティングAPIが大幅に変更されたため、方法が異なります。

以下のルートは、activateフックを使用してjQueryを介してドキュメントのタイトルを設定します。

App.ProductRoute = Em.Route.extend({
    activate: function() {
        $(document).attr('title', 'Auto Web Shop - Product');
    }
});

編集：コメントセクションに記載されているように：

FYI activateは、入力するのではなく、APIメソッドです– pauldechov

この回答は以前のバージョンのEmberで提供されたものであり、現在は適用されていません。

内部では、jQueryを使用してドキュメントの属性connectOutletsを変更するのと同じくらい簡単なことを行うことができます。title

[...]
home: Em.Route.extend({
    route: '/',
    connectOutlets: function (router, context) {                
        // router.set('navbarController.selected', 'home');                     
        router.get('applicationController')
              .connectOutlet('home');                     

        $(document).attr('title', 'YOUR TITLE GOES HERE');
    }
}),                
[...]

ただし、すべてのルートでこれを行う必要があります。

選択したナビゲーションメニュー項目を設定するナビゲーションバーコントローラーのようなものがある場合は、selectedプロパティを監視して、「アクティブ」または「選択した」cssクラスをナビゲーション項目にバインドし、ページタイトルを設定します。または、コンテキストを通過するnavitemモデルのタイトル専用のプロパティを持つこともできます（ただし、ビューでこれを処理し、そこからルートに移行する必要があると思います）。

とにかく、これはページタイトルを設定するための可能な方法の1つを示すためだけのものです。

編集：私はそれを行うために既存のフィドルを変更しました。navigateToルーターのメソッドを見てください：http： //jsfiddle.net/schawaska/hEx84/（実行されていることを確認するには、http： //jsfiddle.net/schawaska/hEx84/show/にアクセスしてください）

于 2012-11-27T18:03:18.047 に答える
6

最新のEmber.js（1.0.0 RC7）を使用して、ページタイトルを設定するための適切なパターンを見つけるのに苦労したため、Ember.Route次のサブクラスを作成することにしました。

AppRoute = Ember.Route.extend({
    renderTemplate: function(controller, model) {
        this.render();

        var pageTitle = this.title ? this.title(controller, model) : null;
        document.title = pageTitle ? pageTitle : "Default Title";
    }
});

// all routes extend this new 'AppRoute'

App.PageRoute = AppRoute.extend({
    model: function(params) {
        // return your model
        return App.Page.find(params.page_id);
    },
    title: function(controller, model) {
        // return whatever should be your page title
        return controller.get('title');
    },
});

このプルリクエストがマージされた場合、おそらくこれはEmber.jsによってネイティブにサポートされます。ルーターはルートハンドラーの「title」プロパティを監視し、document.titleを設定します。注：このプルリクエストは、パラメータとしては渡さcontrollerれないようです。model

同等のCoffeeScriptを使用する場合：Ember.js：ページタイトルを設定するための簡単でクリーンな方法。

于 2013-08-26T09:17:50.077 に答える
5

私はこのアプローチを取りました：

Ember.Route.reopen({
    enter: function(router) { 
        this._super(router)

        # Set page title
        name = this.parentState.get('name')
        if (!Em.none(name)) {
            capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
            $(document).attr('title', "Website - " + capitalizedName)
        }
   }
})

いくつかの問題がnavigateToの使用で発生しましたが、これは少なくとも私の状況ではより信頼性が高く、よりクリーンになりました。

于 2013-02-06T20:57:39.870 に答える
5

このプルリクエストに関する長い議論の結果、これはコアに属していないことが決定されました。機能を実装するコンポーネントとember-cliアドオンがあります。

于 2015-03-01T19:37:39.350 に答える
4

Ember1.4.0では次の方法を使用しました。

App.PageTitle = Ember.Object.create({
    defaultTitle: 'This route has no title defined'
});

RouteWithTitle = Ember.Route.extend({
    activate: function() {
            if ('title' in this){
                document.title = this.title;
                App.PageTitle.set('title',this.title);
            }else{
                document.title = App.PageTitle.defaultTitle;
                App.PageTitle.set('title',this.title);
            }
    }
});

App.ExampleRoute = RouteWithTitle.extend({
    title: 'This is an example route'
});
App.AnotherRoute = RouteWithTitle.extend({
    title: 'This is another route'
});

（ミカ・マザヘリの答えに似ています。）

titleプロパティを使用して、各ルートのタイトルを定義できます。ページタイトルは自動的に更新され、{{App.PageTitle.title}}を使用して任意のハンドルバーテンプレートでタイトルを呼び出すことができます

于 2014-04-10T18:20:29.143 に答える
1

同じ質問がありました。

注：編集することで開始タイトルを変更できることに注意してくださいapp/index.html

シンプルで祝福された方法の代わりに（Ember開発者は私が確信しているより重要なことに忙しい）、私が最もエレガントだと思った答えはここにあるCodeJack からでした：

// file: app/helpers/head-title.js    

import Ember from 'ember';

export function headTitle(title) {
  Ember.$('head').find('title').text(title);
}

export default Ember.Helper.helper(headTitle);

これで、どのビューテンプレートでも、ヘルパーを追加できます。

{{head-title 'View Header'}}

編集：Ember2.0のコードを更新

ソース：<head>タグのEmberハンドルバーテンプレート

于 2015-08-22T02:17:11.937 に答える
0

あなたのルートでの迅速で汚いアプローチ：

actions: {
  didTransition: function() {
    Ember.$('title').text('My awesome page title');      
  }
}
于 2014-08-12T16:03:38.770 に答える