1

我对骨干还是很陌生，所以如果我正在做的事情有任何严重错误，我很抱歉。

我要做的似乎很简单：从数据库中获取模型集合并对其进行一些过滤。假设我们正在尝试过滤酒店。一旦我有了我的主要收藏，我想过滤它们的价格、星级等（几乎可以在 yelp 或tripadvisor 中找到）——当然，我想“重置”过滤器一旦用户取消选中不同的复选框。

到目前为止，我有 3 个视图： - 一个基于将显示结果的面板的视图 - 一个基于代表每个项目（每个酒店）的模板的视图 - 一个视图将包含我想要使用的所有过滤器。

我遇到的问题是我的机器人能够将我的集合保持在这样一种状态，即我能够恢复我的过滤器或使用新集合刷新视图。你能帮我理解我的问题在哪里吗？我该怎么办？

<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. 每次使用过滤时都会重置的过滤集合。
  3. 用于呈现过滤集合的主视图（例如 new MainView({collection: filteredCollection};)) 还必须有集合“重置”事件的处理程序。
  4. 过滤器视图，其模型包含过滤器值并触发过滤器集合重置为新值。

万事如意。抱歉没有代码示例，不在工作中）

于 2014-09-18T18:56:32.097 回答