1

私はまだバックボーンにかなり慣れていないので、私がやっていることに重大な誤りがある場合は申し訳ありません.

私がやろうとしていることは非常に単純に思えます: データベースからモデルのコレクションを取得し、それにいくつかのフィルターを適用します。ホテルをフィルタリングしようとしているとしましょう。メインのコレクションができたら、価格や星などでフィルタリングしたいと思います (ほとんどの場合、yelp や tripadvisor などで見つけることができます)。もちろん、一度フィルターを「リセット」したいと思います。ユーザーはさまざまなチェックボックスをオフにします。

これまでのところ、3 つのビューがあります。 - 結果が表示されるパネルに基づく 1 つのビュー - 各アイテム (各ホテル) を表すテンプレートに基づく 1 つのビュー - 1 つのビューは、使用するすべてのフィルターです。

私が抱えている問題は、フィルターを元に戻したり、新しいコレクションでビューを更新したりできるような状態でコレクションを維持できることです。私の問題がどこにあるかを理解するのを手伝ってもらえますか? そして、私は何をすべきですか？

<script>
// model
var HotelModel = Backbone.Model.extend({});

// model view
var ItemView = Backbone.View.extend({
    tagName : 'div',
    className : 'col-sm-4 col-lg-4 col-md-4',
    template : _.template($('#hotelItemTemplate').html()),

    initialize : function() {
        this.model.bind('change', this.render, this);
        this.model.bind('remove', this.remove, this);
    },

    render : function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

//view list
var HotelListView = Backbone.View.extend({
    el : '#paginated-content',

    events : {
        "scroll" : "fetch"
    },

    initialize : function(options) {
        var items = this.collection;
        items.on('add', this.add, this);
        items.on('all', this.render, this);         
    },

    add : function(item) {
        var view = new ItemView({
            model : item
        });
        $('#paginated-content').append(view.render().el);
    },

    fetch : function() {
        this.collection.getNextPage();
    }
});

// filterign menu
var FilteringView = Backbone.View.extend({
    el : '#filtering',

    // just examples of one of the filters that user can pick
    events : {
        'click #price_less_100 ' : 'updateValue',
        'click #five_stars ' : 'updateStars',
    },

    template : _.template($('#filteringTemplate').html()),

    initialize : function() {
        this.collection.on('reset', this.render, this);
        this.collection.on('sync', this.render, this);
    },

    render : function() {
        this.$el.html(this.template);
        return this;
    },

    updateValue : function(e) {

        //this is something I'm not using at the moment but that it contains a copy of the collection with the filters
        var filtered = new FilteredCollection(coursesPaginated);

        // if is checked
        if (e.currentTarget.checked) {
            var max = 100;

            var filtered2 = _.filter(this.collection.models, function(item) {
            return item.get("price") < max;
            });

            //not used at the moment
            //filtered.filterBy('price', function(item) {
            //  return item.get('price') < 100;
            //});

            //this does not work
            //this.collection.reset(filtered2);

            //so I do this
            this.collection.set(filtered2);

        } else{
              // here, i would like to have something to put the collection in a state before this filter was applied           

          //something that I do not use at the moment
          //filtered.removeFilter('price');
        }

    },
    updateStars : function(e) {
       //do something later
    }
});

// collection
var HotelCollection = Backbone.PageableCollection.extend({
    model : HotelModel,

    // Enable infinite paging
    mode : "server",

    url : '{{url("/api/hotels")}}',

    // Initial pagination states
    state : {
        pageSize : 15,
        sortKey : "updated",
        order : 1
    },

    // You can remap the query parameters from `state` keys from
    // the default to those your server supports
    queryParams : {
        totalPages : null,
        totalRecords : null,
        sortKey : "sort"
    },

    parse : function(response) {
        $('#hotels-area').spin(false);
         this.totalRecords = response.total;
         this.totalPages = Math.ceil(response.total / this.perPage);
        return response.data;
    }
});

$(function() {
    hotelsPaginated = new HotelCollection();

    var c = new HotelListView({
        collection : hotelsPaginated
    });


    $("#paginated-content").append(c.render().el);
    hotelsPaginated.fetch();
});

バックボーンを使用してこのようなフィルタリングを行うのはそれほど簡単ではないように思えます。誰かが他の提案を持っている場合は、してください。

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

4

1 に答える 1

0

これに対する私の解決策：

  1. サーバーから定期的に取得するメイン コレクション。
  2. フィルタリングを使用するたびにリセットされる Filtered Collection。
  3. フィルター処理されたコレクションをレンダリングするために使用されるメイン ビュー (例 new MainView({collection:filteredCollection};)) また、コレクションの「リセット」イベントのハンドラーが必要です。
  4. フィルター値を含むモデルを持ち、フィルター処理されたコレクションを新しい値でリセットするフィルター ビュー。

なんでもかんたん。コード例がなくて申し訳ありませんが、仕事ではありません)

于 2014-09-18T18:56:32.097 に答える