3

一部のWebサイトでは、URLを更新し、使用されているGETパラメータを表示するAjax-ian検索を提供していることに気付きました。次に例を示します。

someapp.com/search/Tokyo?price_min=80&price_max=300

AjaxGETリクエストの結果。

Backbone.jsを使用してこれを実現する方法を知りたいのですが、バックボーンのプッシュ状態を使用することでこれが可能になる可能性があることを理解しています。

たとえば、Placeモデルに対して、そのようなルート（たとえば、同じケース、スコープは/ search）をどのように定義できますか？

これはどこで行いますか？ルーターまたはモデルで？

このトピックに関するすべての回答に感謝します。また、コードを提供しなかったことを事前に謝罪します。通常は提供しますが、この演習は私が作成したい概念実証であり、バックボーンがこの作業に適したツールであることを願っています。

ありがとうございました！

4

1 に答える 1

5

これは、ソリューションの実用的な例です-jsfiddle.net/avrelian/dGr8Y/Backbone.history.navigate 、ただしjsFiddleではメソッドが正しく機能しません。

ボタンがあるとします

<input class="fetch-button" type="button" value="Fetch" />​

とハンドラー

$('.fetch-button').click(function() {
  Backbone.history.navigate('posts/?author=martin', true);
});

これは私たちの投稿のコレクションです

var Posts = Backbone.Collection.extend({
    url: 'api/posts'
});

これは、カスタムパラメータエクストラクタを備えたルーターです

var Router = Backbone.Router.extend({
    routes: {
        'posts/?:filters': 'filterPosts'
    },
    filterPosts: function(filters){
        posts.fetch({data: $.param(filters)});
    },
    _extractParameters: function(route, fragment) {
        var result = route.exec(fragment).slice(1);
        result.unshift(deparam(result[result.length-1]));
        return result.slice(0,-1);
    }
});

簡略化された$.deparamアナログです。代わりに独自のものを使用できます。

var deparam = function(paramString){
    var result = {};
    if( ! paramString){
        return result;
    }
    $.each(paramString.split('&'), function(index, value){
        if(value){
            var param = value.split('=');
            result[param[0]] = param[1];
        }
    });
    return result;
};

そして最後に、投稿コレクションとルーターオブジェクトのインスタンス化

var posts = new Posts;

var router = new Router;
Backbone.history.start();

ユーザーがボタンをクリックすると、アドレスバーがに変わりますmyapp.com/s/#posts?author=martin。記号に注意してください#。ハッシュクエリ文字列を使用します。もちろん使用できますがpush state、まだ普及していません。

于 2012-08-12T21:57:11.397 に答える