2013-04-18 23 views
11

我最近通過閱讀一本書開始學習Backbonejs。我覺得這個issue.Here有點搞不清是一個路由器:我應該使用哪一個? Backbone.js Router.navigate和window.location.hash

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",而路由器根本沒有被觸及。

我認爲「導航」方法會使瀏覽器移動到我指定的頁面,但什麼也沒有發生。爲什麼?

對於最佳實踐,在頁面(或視圖)之間實現移動的最佳方法是什麼?

感謝您的任何想法。

回答

12

根據該文件,如果你也想調用的函數屬於一個特定的路線,你需要通過選項trigger: true:當你達到你的應用程序的一個點

,你想將 另存爲網址,請調用導航以更新網址。如果您希望 也調用路由功能,請將觸發器選項設置爲true。若要在 更新URL而不在瀏覽器歷史記錄中創建條目,請將 替換選項設置爲true。

你的代碼應該是這樣的:

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

一旦你的路由器創建的,你還必須調用

Backbone.history.start(); 

Backbone.history.start([選項])

當你所有的路由器都有 已創建,且所有路由設置正確,請致電 Backbone.history.start()開始監視hashchange事件,並調用 調度路由。

最後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); 
} 
+0

感謝,akoskm。就像你說的那樣,我嘗試在router.navigate()前面移動Backbone.history.start(),它工作正常。所以我必須在導航到某個地方之前開始歷史記錄,對吧? – 2013-04-18 07:23:36

+0

@HetfieldJoe開始監視hashchange事件(導航)是正確的,您必須啓動Backbone.history,請參閱上述文檔中的引用。 – 2013-04-18 07:29:05

+0

響亮而清晰。謝謝,夥計。 – 2013-04-18 07:38:55

18

你也可以使用靜態方法來避免路由器的依賴(同時使用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); 
+0

只更改了網址,而不是內容部分 – 2015-02-02 11:04:52