web-dev-qa-db-ja.com

どちらを使用すればよいですか？ Backbone.js Router.navigateおよびwindow.location.hash

私は最近、本を読んでBackbonejsを学び始めました。そして、私はこの問題について少し混乱を感じています。ここにルーターがあります：

define(['views/index', 'views/login'], function(indexView, loginView) {

    var SelinkRouter = Backbone.Router.extend({

        currentView: null,

        routes: {
            'home': 'home',
            'login': 'login'
        },

        changeView: function(view) {
            if(null != this.currentView)
                this.currentView.undelegateEvents();
            this.currentView = view;
            this.currentView.render();
        },

        home: function() {
            this.changeView(indexView);
        },

        login: function() {
            this.changeView(loginView);
        }
    });

    return new SelinkRouter();
});

これはアプリケーションの起動方法です：

define(['router'], function(router) {

    var initialize = function() {
        // Require home page from server
        $.ajax({
            url: '/home',          // page url
            type: 'GET',           // method is get
            dataType: 'json',      // use json format
            success: function() {  // success handler
                runApplicaton(true);
            },
            error: function() {    // error handler
                runApplicaton(false);
            }
        });
    };

    var runApplicaton = function(authenticated) {

        // Authenticated user move to home page
        if(authenticated) window.location.hash='home';
                          //router.navigate('home', true); -> not work

        // Unauthed user move to login page
        else window.location.hash='login';
             //router.navigate('login', true); -> not work

        // Start history
        Backbone.history.start();
    }

    return {
        initialize: initialize
    };
});

私の質問は、runApplicationの部分についてです。私が読んだ本の例は、このようにルーターをモジュールに渡しましたが、window.location.hash = "XXX"、そしてルータはまったく触れられませんでした。

"navigate"メソッドを使用すると、ブラウザが指定したページに移動すると思いましたが、何も起こりませんでした。どうして？

そして、ベストプラクティスのために、ページ（またはビュー）間の移動を実現するための最良の方法は何ですか？

任意のアイデアをありがとう。

backbone.jsbrowser-history
11
Hetfield Joe

ドキュメントによると、特定のルートに属する関数も呼び出す場合は、オプションtrigger: trueを渡す必要があります。

アプリケーションでURLとして保存したい場所に到達したら、navigateを呼び出してURLを更新します。 route関数も呼び出す場合は、トリガーオプションをtrueに設定します。ブラウザの履歴にエントリを作成せずにURLを更新するには、replaceオプションをtrueに設定します。

コードは次のようになります。

if(authenticated)
    router.navigate('home', {trigger: true});

ルーターが作成されたら、次も呼び出す必要があります

Backbone.history.start();

Backbone.history.start（[options]）

すべてのルーターが作成され、すべてのルートが適切に設定されたら、Backbone.history.start（）を呼び出してハッシュ変更イベントの監視とルートのディスパッチを開始します。

最後に、runApplicationロジックは次のようになります。

var runApplicaton = function(authenticated) {

    var router = new SelinkRouter();
    // Start history
    Backbone.history.start();

    // Authenticated user move to home page
    if(authenticated)
        router.navigate('home', true);
    // Unauthed user move to login page
    else
        router.navigate('login', true);
}
12
Akos K

静的メソッドを使用して、ルーターの依存関係を回避することもできます（たとえばrequirejsを使用している間）。

Backbone.history.navigate(fragment, options)

このように、あなたはただ必要です：

// Start history
Backbone.history.start();

// Authenticated user move to home page
if(authenticated)
  Backbone.history.navigate('home', true);
// Unauthed user move to login page
else
  Backbone.history.navigate('login', true);
18
griable