Javascript 过滤主干收集并保持原始

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

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);
  }
});

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

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

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.
}

---

您不应该在视图中筛选集合。更好的方法是从原始集合创建FilteredCollection

DateFilteredCollection 数据索引视图 创建视图

---

很抱歉，当我在第this.collection.reset（）行上复制代码时，应该是this.collection.reset（已筛选）。我想再次调用render的原因是，有几个函数（未显示）可以从新集合中提取分析。现在，您的请求已明确。更新答案以更好地帮助您。有任何答案对您有帮助吗？如果是这样的话，请你投赞成票好吗？非常感谢。

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.