1

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

问题

当我点击一个显示“/foo”的链接以显示 ID：1 的约会时，Backbone 路由器首先到达那个位置，我可以在 Rails 路由器接管并抱怨没有 /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 调用的点击事件？

4

1 回答 1

0

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

我认为您也收到了Backbone.history.navigate("foo");错误的调用-据我从文档中可以看出，Backbone.history它没有功能。navigate您实际上应该在您的Backbone.Router实例上调用 .navigate ，并传入trigger选项以使其调用触发路由。例如：

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

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

于 2012-04-11T11:40:09.727 回答