6

我知道有很多关于使用 Backbone.js 组织应用程序的教程/信息。我正在这些教程的帮助下逐渐创建一个。我似乎无法理解路由器的概念。好吧，我知道路由器是起点（并告诉应用程序的状态），最好避免在那里放置更多逻辑。

我有一个路由器。我的应用程序首先会加载页眉、页脚和页面的主要部分。在主要部分，首先，我应该登录用户。要加载登录页面，我会这样做：

       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中。

请在这里告诉我正确的方法。预先感谢！

4

3 回答 3

12

查看 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-13T09:22:57.213 回答
7

您只需通过以下方式将浏览器发送到适当的路由：

location.href = "#/the_route_you_want";

内部的侦听器Backbone.history将捕获hashChange事件并显示正确的视图。

这可以通过 HTML 以非常简单的方式完成：

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

供进一步阅读。

于 2013-03-13T05:29:01.267 回答
1

如果您还想调用路由函数，请将 trigger 选项设置为 true：

app.navigate("help/troubleshooting", {trigger: true});
于 2016-01-13T19:42:11.923 回答