Question

我无法通过Backbone使用导航栏导航到不同的路线。点击#logo和#home可以正确地将我发送到index。但是，点击#demo也会将我发送到index而不是demo路由。为什么呢？

navbar.js

var HeaderNavView = Backbone.View.extend({
  tagName: 'div',

  template: _.template( HeaderNavTemplate ),

  events: {
    'click #logo': 'goToIndex',
    'click #home': 'goToIndex',
    'click #demo': 'goToDemo'
  },

  render: function() {
    var template = this.template();
    this.$el.html(template);
    return this;
  },

  goToIndex: function() {
    console.log('go to index');
    IndexRouter = new Backbone.Router();
    var route = '';
    IndexRouter.navigate(route, {trigger: true});
  },

  goToDemo: function() {
    console.log('header nav to demo route')
    demoRouter = new Backbone.Router();
    var route = 'demo';
    demoRouter.navigate(route, {trigger: true});
  }
});

routes.js

Router = Backbone.Router.extend({
  routes: {
    '': 'index',
    'demo': 'demo'
  },

  index: function() {

    $('#videoIndex').append( IndexTemplate )
    var headerNavView = new HeaderNavView;
    $('#indexHeaderNav').append( headerNavView.render().el );

    ...additional nested views
  },

  demo: function() {

    $('#demoDetails').append( DemoTemplate );

    ...additional nested views
  } 
});

Answer 1

我不想简化您的路由，但为什么要创建新路由器以导航到/demo？

 goToDemo: function() {
    console.log('header nav to demo route')
    demoRouter = new Backbone.Router();
    var route = '/demo';
    demoRouter.navigate(route, {trigger: true});
  }

可简化为：

goToDemo: function() {
  Backbone.history.navigate('demo', {trigger: true});
}

另一种解决方法是为链接创建一个catch all事件监听器，它将导航到“local”锚点指定的主干路由：

// stolen from: http://stackoverflow.com/questions/7640362/preventing-full-page-reload-on-       backbone-pushstate
$(document).on('click', 'a:not([data-bypass])', function (evt) {
   var href = $(this).attr('href');
   var protocol = this.protocol + '//';

   if (href.slice(protocol.length) !== protocol) {
     evt.preventDefault();
     Backbone.history.navigate(href, true);
   }
});

这样您的视图就不需要处理导航到单个路径。您可以在视图的模板（或任何视图的模板）中包含a标记，然后让Backbone接管。

一边

目前，您的goToDemo功能不会使用您在routes.js中创建的路由器。通常，您可以在单个脚本之外初始化此路由器（绑定到全局类似app），然后使用它进行导航。在单个路由上实例化路由器不是解决此恕我直言的最佳方式。

Backbone.js路由器导航到不正确的路由

1 个答案: