0

我无法通过 Backbone 使用导航栏导航到不同的路线。单击#logo并#home正确将我发送到index. 然而，点击#demo也将我发送到index而不是demo路线。为什么？

导航栏.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});
  }
});

路由.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
  } 
});
4

1 回答 1

2

我不想简化你的路由，但你为什么要创建一个新的路由器来导航/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});
}

另一种解决方法是为链接创建一个捕获所有事件侦听器，该侦听器将导航到“本地”锚指定的主干路由：

// 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。通常你会在你的个人脚本之外初始化这个路由器（绑定到一个全局的 like app），然后用它来导航。在单个路由上实例化路由器并不是解决这个恕我直言的最佳方法。

于 2013-08-13T19:20:35.733 回答