Backbone.js路由没有被触发

Question

我有一个Rails 3.2.3应用与Backbone.js和我在我的Backbone.history上使用pushState。

的问题

当我点击它去说“/富”，以显示与ID任命一个链接：1，然后骨干路由器到达，首先，我可以前滑轨路由器快速查看接管并抱怨没有/ foo路线。

我Backbone.js的代码

这是我的骨干路由器。

window.AppointmentApp = new (Backbone.Router.extend({ 
    routes: { 
     "": "index", 
     "foo": "foo", 
     "appointments": "index", 
     "appointments/:id": "show" 
    }, 
    foo: function(){ 
     $("#app").append("foo<br />"); 
    }, 
    initialize: function() { 
     this.appointments = new Appointments(); 
     this.appointmentListView = new AppointmentListView({ collection: this.appointments }); 
     this.appointmentListView.render(); 
    }, 
    start: function() { 
     Backbone.history.start({pushState: true}); 
    }, 
    index: function() { 
     $("#app").html(this.appointmentListView.el); 
     this.appointments.fetch(); 
    }, 
    show: function(id) { 
     console.log("Enter show"); 
    } 
})); 

它应该停留在同一页面上并在#app div附加一个'foo'，但它永远不会。

骨干指数观众

window.AppointmentListView = Backbone.View.extend({ 
    template: JST["appointments/index"], 
    events: { 
     "click .foo": function(){Backbone.history.navigate("foo");}, 
    }, 
    comparator: function(appointment){ 
     return appointment.get('topic'); 
    }, 
    initialize: function(){ 
     this.collection.on('reset', this.addAll, this); 
    }, 
    render: function(){ 
     this.$el.html(this.template); 
     this.addAll(); 
     return this; 
    }, 
    addAll: function() { 
     this.collection.forEach(this.addOne, this); 
    }, 
    addOne: function(appointment){ 
     var appointmentView = new AppointmentView({model: appointment}); 
     this.$el.append(appointmentView.render().el); 
    } 
}); 

应用程序/资产/模板/约会/ Index.jst.ejs

<h1>Appointments</h1> 
<a href="/foo" class="foo">Say Foo</a> 
<a href=appointments/add>Add</a> 
<div id="app"></div> 

我用pushState的，因为它让我保持历史和后退按钮功能。

Backbone.history.navigate不会调用我的Backbone路由，而是调用Rails路由。我该如何解决这个问题？

我应该试图设置Backbone来接受诸如'约会/ 1'之类的路线并采取控制措施，还是必须使用像上面那样的Backbone.history.navigate调用来使用单击事件？

Answer 1

您需要从您的click .foo事件处理程序返回false，否则浏览器将继续，就像您正常点击链接并请求服务器上的实际/foo页面一样。

我认为你也打电话给Backbone.history.navigate("foo");错误 - Backbone.history没有navigate功能，据我可以从文档中看到。您实际上应该正在呼叫您的Backbone.Router实例，然后传递trigger选项以使其呼叫触发路由。例如：

window.AppointmentApp.navigate("foo", { trigger : true }); 

你可能已经知道这一点，但如果你使用pushState的计划，那么你真的应该更新您的服务器端支持所有的客户端做的URL。否则，如果用户决定复制&将该URL粘贴到另一个选项卡中，则它们将会碰到抱怨没有路由的rails。