Backbone中視圖內的呼叫路由

我知道有大量關於使用Backbone.js組織應用程序的教程/信息。我正在藉助這些教程逐步創建一個。我似乎無法理解路由器的概念。那麼，我知道路由器是起點（並告訴應用程序的狀態），最好避免在那裏放置更多的邏輯。Backbone中視圖內的呼叫路由

我有一個路由器。我的應用程序會首先加載頁眉，頁腳和頁面的主要部分。在主要部分，首先，我應該登錄用戶。要加載登錄頁面，我會這樣做：

 var AppRouter = Backbone.Router.extend({ 
      initialize : function() { 
      var headerView = new HeaderView({el:$('#header')}); 
      headerView.render; 

      var footerView = new FooterView({el:$('#footer')}); 
      footerView.render; 

      var loginView = new LoginView({el:$('#login')}); 
      loginView.render; 
     }, 
     routes : { 
      "inbox" : "inbox", 
      "sentbox : "sentbox" 
     }, 
     inbox : function() { 
      // ... 
     }, 
     sentbox : function() { 
      // ... 
     } 
    }); 
    app = new AppRouter(); 
    Backbone.history.start();

成功登錄後，郵件頁面將被加載。 MailView有一些事件可顯示收件箱，例如發件箱。

 events: { 
     "click .inbox": "showInbox", 
     "click .sentbox": "showSentbox", 
     }, 
     showInbox : function() { 
      // app.route() or app.inbox() - ? 
     }

在這一點上，我希望路由器分別顯示../#inbox和../#sentbox。我想知道是否應該在這裏調用路由器的一種方法來顯示地址欄中的內容。我爲什麼會感到困惑是因爲它說使用一臺路由器比另一臺路由器更好。如果我這樣做，我的AppRouter會更加複雜。另一個問題是，如果用戶直接輸入地址，我應該加載該頁面。我認爲它需要把邏輯放在AppRouter之內。

請在這裏告訴我正確的方法。事先感謝！

來源

2013-03-13 boburShox

退房Router.navigate（）（http://documentcloud.github.com/backbone/#Router-navigate）

我通常保存的實例變量我我的App對象內的路由器，例如

var App = { 
    Views: {}, 
    Routers: {}, 
    Models: {}, 
    data: {} 

    initialize: function() { 
    this.data.mainRouter = new App.Routers.MainRouter(); 
    } 
};

其中App.MainRouter被定義爲：

App.Routers.MainRouter = Backbone.Router.extend({ 

    routes: { 
    'route1' : 'route1handler', 
    'route2/:param' : 'route2handler' 
    }, 

    ... 
});

然後我的視野內，如果我想定位到一個新的路線，我呼籲：

App.data.mainRouter.navigate('route2/param1');

來源

2013-03-13 09:22:57

請注意，如果您的路由器無法從您的視圖訪問，您也可以調用'Backbone.history.navigate'。 – jgillich 2014-01-30 08:44:50

好點 - 這可能是一個更好的選擇 – 2014-01-30 15:36:43

這隻會改變網址哈希並且不會觸發路由的處理方法 – skaterdav85 2015-05-06 23:04:55

你只需通過發送瀏覽器到合適的路徑：

location.href = "#/the_route_you_want";

內Backbone.history監聽器將捕獲hashChange事件和適當觀察就會顯示出來。

這可以以非常簡單的方式通過HTML來完成：

<a href="#/the_route_you_want">The Route You Want</a>

For further reading.

來源

2013-03-13 05:29:01

感謝您的快速響應。我實際上並沒有使用''。其次，如果用戶在地址欄輸入url，會發生什麼情況。 – boburShox 2013-03-13 05:35:09

如果你想還要調用路由功能，請將觸發器選項設置爲true：

app.navigate("help/troubleshooting", {trigger: true});

來源

2016-01-13 19:42:11

Backbone中視圖內的呼叫路由

回答

相關問題