新しいURLをBackbone.historyにプッシュすると、クエリのパラメータは保持されますか？

Question

はのは、私がバックボーンpushstateを使用していると私は、クエリのparamsでページに移動しましょう：

domain.com/user/111?hello=123 

私はこれを実行すると：？

Backbone.history.navigate('/settings', true); 

完全

マイ設定ページのロードが、ハロー= 123回のURLでの滞在...

domain.com/settings?hello=123 

そして、そのクエリparamがどこでも、私はサイトをナビゲートするURLにとどまる...

Answer 1

バックボーンルーティングとクエリパラメータは、不幸な結婚です。問題はよくthis GitHub issueに記載されています。

Backbone.Routerは、URLハッシュフラグメントとpushState APIで動作するように設計されています。ハッシュURLを使用する場合、クエリ文字列はハッシュに先行し、ルート内で照合されることはありません。 pushStateでは、クエリ文字列はURLフラグメントの一部であり、別のルート表現が必要です。

経路がsearchで、その経路がオプションでパラメータq,sortおよびtypeを受け取るとします。ようになり、クエリ文字列として：

search?q=kittens&sort=asc&type=images 

問題は、古いブラウザのユーザーのために、バックボーンはhashchangeベースのルーティングに戻りますこと、である、とルートはなります：

?q=kittens&sort=asc&type=images#search 

プラグインはこの問題を回避しようとしますが、コアの問題は解決しません。

可能であれば、クエリ文字列を使用しないことを検討し、ルート式にオプションのフラグメントを使用して状態情報を渡す必要があります。前の例のルートはその後になる：限り、ルートのフラグメントがでているよう

var Router = Backbone.Router.extend({ 
    routes: { 
    "search(/q/:query)(/sort/:sort)(/type/:type)": "search" 
    }, 

    search: function(query, sort, type) { 
    console.log(query, sort, type); //-> "kittens", "asc", "images" 
    } 
}); 

：

//pushState 
search/q/kittens/sort/asc/type/images 

//hash fragment 
#search/q/kittens/sort/asc/type/images 

(optional)ルート部品と:captures（docs）を使用すると、次の式でこのURLを表すことができ指定された順序で、URLと一致するものはありません。例：

search      //-> undefined, undefined, undefined 
search/q/kittens/type/images //-> "kittens", undefined, "images" 
search/sort/asc/type/images //-> undefined, "asc",  "images" 

このwサードパーティのクエリ文字列ライブラリやブラウザの互換性について心配する必要はありません。そして、あなたが私に尋ねるなら、後者のタイプのURLもきれいに見えます。

Answer 2

backbone-query-parametersプラグインを使用してこれ以上対処する必要はありません。最新バージョンのBackboneがインストールされていることを確認してからloadUrlメソッドをHistory.prototypeに上書きしてください。

// Regex to match search query strings 
var searchStripper = /\?.*$/g; 

// Attempt to load the current URL fragment. If a route succeeds with a 
// match, returns `true`. If no defined routes matches the fragment, 
// returns `false`. 
loadUrl: function(fragmentOverride) { 
    var fragment = this.fragment = this.getFragment(fragmentOverride); 
    fragment = fragment.replace(searchStripper, ''); // remove the search query parameter 
    var matched = _.any(this.handlers, function(handler) { 
    if (handler.route.test(fragment)) { 
     handler.callback(fragment); 
     return true; 
    } 
    }); 
    return matched; 
}, 

Answer 3

これが遅すぎるかどうかはわかりません。私は同じ問題に遭遇し、私は自信を持ってそれを言うことができます：それはバックボーンクエリパラメータによって引き起こされるバグです。

実際にあなたの投稿に影響を受けました。私の現在のプロジェクトの初期段階で、私はバックボーンクエリパラメータを導入しました。うまくいきました。しかし後で、バックボーンはいくつかの変更を加え、バックボーンクエリーパラメータはこれ以上パラメータを取得できません。最近まで、私は著者がbackbone-query-parametersをアップグレードしたことを発見しました。私は再びそれを引っ張って、それは働いた。

あなたが知っている。私は同じ問題に直面し、本当に不満を感じる。あなたの投稿を見たときまでではなく、私はバックボーンクエリーパラメータについて疑問を抱かなかった。

私はプラグインを削除し、自分のコードを装備しました。これで私の歴史は魅力的なものになりました。

getパラメータを取得する方法は多数あります。私のものはただのものですが、それは私の仕事です。ちょうどあなたの参照のために私はここに投稿します。

getParams: -> 
    rtn = {} 

    if window.location.search.length > 0 
     queryStringRegex = /^\?(.*)/ 
     match = queryStringRegex.exec window.location.search 
     param_string = match[1] 

     if param_string.length > 0 
     params_array = param_string.split("&") 

     for value in params_array 
      temp = value.split("=") 
      rtn[temp[0]] = decodeURI(temp[1]) 

    rtn 

念のため、私のルートは、この

"path(?*queryString)" : "pathAction"