Question

我知道有很多关于使用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有一些事件要显示收件箱，例如sendbox。

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

此时，我希望路由器分别显示../#inbox和../#sentbox。我想知道我是否应该在这里调用一个路由器的方法来显示在地址栏中。为什么我感到困惑是因为它说使用一个路由器比使用更好。如果我这样做，我的AppRouter会更复杂。另一个问题是如果用户直接输入地址，我应该加载该页面。我认为需要将逻辑放在 AppRouter 中。

请告诉我这里正确的做法。先谢谢！

Answer 1

查看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');

Answer 2

您只需通过以下方式将浏览器发送到相应的路线：

location.href = "#/the_route_you_want";

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

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

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

For further reading.

Answer 3

如果您还想调用路线功能，请将触发选项设置为true：

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

在Backbone中的视图内部调用路由

3 个答案: