1

Backbone.jsを使用したRails3.2.3アプリがあり、Backbone.historyでpushStateを使用しています。

問題

「/foo」というリンクをクリックしてID：1の予定を表示すると、バックボーンルーターが最初にそのリンクに到達します。これは、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");
    }   
}));

同じページにとどまり、＃appdivの最後に「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);
    }
});

app / Assets / templates / appointments / 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は、バックボーンルートを呼び出さず、代わりにRailsルートを呼び出します。これを修正するにはどうすればよいですか？

'appointments / 1'などのルートを受け入れて制御するようにBackboneを設定する必要がありますか、それとも上記のようにBackbone.history.navigate呼び出しでクリックイベントを使用する必要がありますか？

4

1 に答える 1

0

イベントハンドラからfalseを返す必要がありますclick .foo。そうしないと、ブラウザは通常どおりリンクをクリックしたかのように続行し、サーバーに実際の/fooページを要求します。

あなたもBackbone.history.navigate("foo");間違った呼びかけをしていると思います-私がドキュメントから見る限りBackbone.history、機能はありません。実際には、インスタンスでnavigate.navigateを呼び出し、ルートを呼び出すようにオプションを渡す必要があります。例えば：Backbone.Routertrigger

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

これはすでにご存知かもしれませんが、pushStateの使用を計画している場合は、クライアント側がサポートするすべてのURLをサポートするようにサーバー側を実際に更新する必要があります。そうしないと、ユーザーがURLをコピーして別のタブに貼り付けることにした場合、ルートがないことを訴えるレールにぶつかるだけです。

于 2012-04-11T11:40:09.727 に答える