过滤 Backbone 集合并保持原始答案

【问题标题】：Filter Backbone collection and keep original过滤 Backbone 集合并保持原始
【发布时间】：2014-02-18 02:53:03
【问题描述】：

在下面的代码中，我设置了一个视图，我在其中根据日期输入过滤集合。代码第一次正常工作，但显然集合会重置，然后如果我再次按日期过滤，它不会从原始集合中过滤。过滤骨干中的集合并维护原始副本的最佳做法是什么？

window.DataIndexView = Backbone.View.extend({  
  tagName: 'section',
  className: 'data',
  events: {
    "click #changedate" : "filterDate"
  },
  initialize: function(){
   _.bindAll(this, 'render', 'filterDate');
   .template = _.template($("#data_template").html());
    this.collection.bind('reset', this.render());
  },
  render: function(){
    var data = this.collection;
    $(this.el).html(this.template({}));

    data.each(function(point){  

    });

    return this;
  },
  filterDate: function() {
    var startdate = this.$("#startdate").val();
    var filtered = _.filter(this.collection, function(item) {
      return moment(item.get("date")).valueOf() > moment(startdate, 'MM-DD-YYYY').valueOf();
    });
    this.collection.reset(filtered);
  }
});

【问题讨论】：

任何答案对您有帮助吗？如果是这样的话，你会赞成吗？谢谢。

标签： javascript backbone.js

【解决方案1】：

_.filter 不触及您的收藏。它返回一个全新的数组。如果您愿意，可以使用它来实例化一个新集合。

我相信你想要的东西可以通过类似的方式实现

filterDate: function() {
  var startdate = this.$("#startdate").val();
  // Basically a collection clone. It'll keep the same references,
  // instead of copying each object
  this.original_collection = new YourCollectionType(this.collection.models);
  this.collection.reset(_.filter(this.collection, function(item) {
    return moment(item.get("date")).valueOf() > moment(startdate, 'MM-DD-YYYY').valueOf();
  }));
  // Render triggered automagically.
}

【讨论】：

对不起，当我复制代码时 this.collection.reset() 应该是 this.collection.reset(filtered)。我想再次调用 render 的原因是有几个函数（未显示）可以从新集合中提取分析。
现在您的要求很明确了。已更新答案以更好地为您提供帮助。

【解决方案2】：

您不应该在视图中过滤您的收藏。更好的方法是从您的原始集合创建 FilteredCollection。

DateFilteredCollection

function DateFilteredCollection(original){
    var filtered = new original.constructor();

    filtered.filter = function(startdate){

        var filteredItems = _.filter(this.collection, function(item) {
            return moment(item.get("date")).valueOf() > moment(startdate, 'MM-DD-YYYY').valueOf();
        });

        filtered.reset(filteredItems);
    };

    original.on('reset', function(){
        filtered.reset(original.models);
    });

    return filtered;
}

数据索引视图

window.DataIndexView = Backbone.View.extend({  
  tagName: 'section',
  className: 'data',
  events: {
    "click #changedate" : "filterDate"
  },
  initialize: function(){
   _.bindAll(this, 'render', 'filterDate');
   .template = _.template($("#data_template").html());
    this.collection.bind('reset', this.render());
  },
  render: function(){
    var data = this.collection;
    $(this.el).html(this.template({}));

    data.each(function(point){  

    });

    return this;
  },
  filterDate: function() {
    var startdate = this.$("#startdate").val();
    this.collection.filter(startdate); // use filter function here
  }
});

创建视图

var original = new OriginalCollection();  // your original collection
var filteredCollection = DateFilteredCollection( original );
var dataIndexView = new window.DataIndexView({
  collection: filteredCollection
});

original.fetch(); // fetch the data -> filteredCollection will automatically filter it.

【讨论】：