骨幹過濾器的收集和渲染它

Question

我對骨幹網還是比較陌生的，所以我很抱歉如果我在做什麼時會出現嚴重的錯誤。

我想要做的事似乎很簡單：從數據庫中獲取模型集合並對其執行一些過濾器。假設我們正在嘗試過濾酒店。一旦我有我的主要收藏，我想過濾他們的價格，明星，等等（幾乎可以找到你在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(); 
}); 

在我看來，這不是那麼容易做到的過濾這樣的使用骨幹。如果有人有其他建議，請做。

謝謝！

Answer 1

我對這個解決方案：

1. 主要收藏從服務器讀取的週期性。
2. Filtered Collection每次使用過濾都會重置。
3. 用於呈現過濾集合的主視圖（示例new MainView（{collection：filteredCollection};））集合'reset'事件的處理程序必須爲 。
4. 過濾器視圖，其中有一個模型包含過濾器值，並觸發Filtered Collection使用新值重置。

永恆的容易。 對不起，沒有代碼示例，不工作）