履歴の閲覧時にSPA以外のアプリケーションのBackbone.jsに問題が発生する

Question

最近Backbone.jsで開発を開始しました。このアプリケーションでは、複数のフィルタ（たとえば、日付、ステータスなど）で多くの行をフィルタリングできる画面が表示されます。

問題は、SPA（シングルページアプリケーション）ではなく、事実、Backbone.jsを利用する単一のページ。したがって、他のページではこのフレームワークを使用しません。これら2つのルート（/rowsと/rows/search/:params）でのみ。

これらのルートを参照するときに問題はありませんが、ロードされて完全に動作しています。たとえば、/loginをブラウズすると、フルページをリフレッシュしてから履歴の戻るボタンをクリックすると問題が発生します。戻るボタンを押すと、Model.fetchメソッドによって呼び出された最後のJSONが表示されます。

私はいくつかのことを試しました。おそらく、私はバックボーンの方法を持っていないかもしれません。

まず、私はBackbone.history.start({root: '/rows'});を試してみましたが、このパスからのみpushStateをしたいと思っています。同じエラーが発生しました。

私はビューでpushStateを処理した方法かもしれません。だから、私はこの方法を実行します。

App.View.Rows = Backbone.View.extend({ 
    el: $(document.body), 
    events:{ // my events }, 
    initialize: function() { 
    this.model = new App.Collection.Model(); 
    this.model.bind('reset', this.render, this); 
    }, 
    submitForm: function(ev) { 
    ev.preventDefault(); 
    this.search(ev); 
    return false; 
    }, 
    openFilters: function() { 
    var el = this.el.find('div.box_content'); 
    if (!el.is(':visible')) el.slideDown(); 
    }, 
    resetFilters: function() { 
    window.location.hash = "/rows"; 
    }, 
    populate: function(opts) { 
    var opts = opts || (opts = {}); 
    if (this.lastFetch) this.lastFetch.abort(); 
    this.lastFetch = this.tasks.fetch({data: opts}); 
    }, 
    render: function() { 
    // logic to render results 
    }, 
    search: function(ev) { 
    this.doSearch(this.getFilterOptions()); 
    }, 
    getFilterOptions: function() { 
    var opts = //get url params 
    return opts; 
    }, 
    doSearch: function(opts) { 
    window.location.hash = '/rows/search/' + $.param(opts); 
    } 
}); 

私もBackbone.history.navigateためwindow.location.hashを変更しようとしましたが、エラーがまだ残っていました。実際はBackbone.history.navigateが私の最初のショットだったので、window.location.hashに変更しました。

私のコレクションは通常のものですが、urlパラメータのみが指定され、検索はクエリ文字列で行われます。

だから、どういうことができますか？なぜ私は歴史が戻ると、Backbone.jsのルータを起動するのではなくJSONを表示していますか？これをどうすれば解決できますか？ Backbone.jsをSPAの代わりに単一のページに入れることは可能ですか？

Answer 1

コメントの追加情報に基づいて、/ rows/search/fooはサーバー側を/ rows？q = fooにルーティングしています。 pushStateをオフにしてみてください。次いで

動作が修正されました場合、：

代わり

Backbone.history.start（{真pushState}）の使用

Backbone.history.start（）

これはサーバー側のルーティングの問題です。引き続きpushStateを使用する場合は、「/ rows」（たとえば/ rows/search/foo）で始まるURLが「/ rows」と同じHTMLを返すようにする必要があります。これはもちろん、あなたのAjaxリクエストに異なるURLパターン（たとえば、/ rows？q = fooの代わりに/ api/rows？q = foo）を使用する必要があることを意味します。