16

私はbackbone.jsを使用してシングルページアプリケーションを作成していますが、タイトルの変更を処理するための最良の方法を知りたいです。ビューに「title」オプションを設定し、ルーターに（どういうわけか）document.titleを設定させることを考えていました。誰かが似たようなものを実装しましたか？ありがとう

4

5 に答える 5

34

Backbone.jsのイベント化された性質を使用してみませんか。

まず、ドキュメントタイトルの更新を委任するのはルーター次第ではないと思います。特に、より大規模なクライアント側アプリケーションを使用している場合は、それをシンプルに保ち、アプリケーションの各部分が特定のタスクを実行するようにします。

ルーターはルートを委任するためにあり、それ以上のものはありません。

代わりに、（アプリケーションの初期化方法に応じて）アプリケーションレベルのイベントアグリゲーターを作成することをお勧めします。

var app = new Application();
app.eventAggregator = _.extend({}, Backbone.Events);

イベントをアプリにバインドします。

app.eventAggregator.on('domchange:title', this.onDomChangeTitle, this);

アプリケーション構成のどこに

onDomChangeTitle: function (title) 
{
   $(document).attr('title', title);
}

これで、常にタイトルを取得して各ビューにメソッドがあることを確認するためにルーターに任せる代わりに、getTitleビュー内で、つまり任意のビューで、ビューをレンダリングまたは初期化するときに次のイベントをトリガーできます。 ：

app.eventAggregator.trigger('domchange:title', this.title);

私の意見では、それはよりクリーンでスリムなコードになりますが、繰り返しになりますが、それは単なる意見です。

于 2012-05-08T10:25:37.837 に答える
27

純粋なJavascriptを使用する代わりに、jQueryを使用してドキュメントのタイトルを変更するのはなぜですか？より速く、より簡単に、よりクリーンに...

document.title = 'new title';
于 2013-05-07T09:35:52.160 に答える
2

ルーターのコールバックにコードを配置することをお勧めします。これは別のコード行になりますが、現在のビューを知らないと、ルーター/アプリはどのビューが正しいタイトルを持っているかを知りません。（Backbone.JSの一部の組み込み関数を置き換えずに、動作をオーバーライドしてドキュメントタイトルを提供するのに適した場所は実際にはありません）。

非常に簡単にビューに何かを追加できます。

var PeopleView = Backbone.View.extend({
    title: 'People are People',
    //
    //or 
    //
    getTitle: function () {
        return "Something Dynamic";
    }
});

そして、ルーターのコールバックで：

var v = new PeopleView();
$(document).attr('title', v.getTitle());

もう1つのオプションは、ビューが作成されたとき、または特別なメソッドが呼び出されたときに、ビューに設定させることです。しかし、私は最初のオプションを使用します。

于 2012-05-08T01:38:24.983 に答える
1

これは私がこれを私のプロジェクトで行うことです：

var App = {};

App.HomeView = Backbone.View.extend({
  documentTitle: 'my site title'
})

var Router = Backbone.Router.extend({
  routes: {
      '':    'home'
    , 'home': 'home'

, baseTitle: ' - my site'

, home: function(actions) {
    var obj = this;
    obj._changePage('HomeView');
  }

, changeTitle: function(title, withoutBaseTitle) {
    var obj = this;

    if(withoutBaseTitle !== true)
      title += obj.baseTitle;

    document.title = title;
    return obj;
  }

, _changePage: function(viewName, viewOptions) {
    var obj = this;
    var page = App[viewName]();

    if(typeof page.documentTitle !== 'undefined') {
      obj.changeTitle(page.documentTitle);
    }
  }

})
于 2013-12-18T04:33:16.877 に答える
1

ちょっと古い投稿ですが、もう一回転生させていただきます。

currentMarionette v3.2.0を使用すると、次のことができます。

// Get title from view where we manage our layout/views
var viewTitle = view.triggerMethod('page:title');

あなたの見解では、あなたはこのような魔法の方法を作成しています：

Mn.View.extend({
    onPageTitle() {
        return ['User', this.model.get('id')].join(' | ');
    }
});

また、タイトルの解決自体は次のようになります。

document.title = !!viewTitle
        ? (
            _.isArray(viewTitle)
                ? [baseTitle].concat(viewTitle)
                : [baseTitle, viewTitle]
          ).join(' / ')
        : baseTitle ;

配列として返され、単一の区切り文字で展開されるタイトルの解決を可能にします

  • コンテンツショーを管理する場所で、アプリケーションワークフローに簡単に統合できます。
  • onPageTitleビューのコンテキストで呼び出され（this関数内のビューインスタンスになります）、モデルデータやビュー関連のものを呼び出す可能性があります。
  • メソッドの可用性を確認する必要はありません。コールアンドゴーするだけです。
  • triggerMethodさらに、そのような場合に返されるようなメソッドが定義されていない場合は、いつでもデフォルトのタイトルにフォールバックできますundefined。
  • 利益！
于 2017-03-14T18:54:10.197 に答える