Question

我有一个带Backbone.js的Rails 3.2.3应用程序，我在Backbone.history上使用pushState。

问题

当我点击一个名为'/ foo'的链接以显示ID为1的约会时，Backbone路由器首先到达，我可以在Rails路由器接管之前快速看到并抱怨没有路由for / 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");
    }   
}));

它应该保持在同一页面并将'foo'附加到#app div的末尾，但它永远不会。

骨干索引查看器

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实例上调用.navigate，并传入trigger选项以使其调用触发路由。例如：

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

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

Backbone.js路由未被触发

1 个答案: