如何筛选模型？

Question

请帮助修复脚本。 jsfiddle

我简单地筛选了 collection 个模型。每个模型都有字段 'title'。页面包括：标题列表和搜索字段。

用户在搜索字段中输入了字母，但未过滤标题列表。问题

型号和collection：

APP.NewsModel = Backbone.Model.extend({
  defaults:{
    "title": ""
  }
});  

APP.NewsModelsCollection = Backbone.Collection.extend({
  model: APP.NewsModel,

  search : function(letters){ console.log(letters)
    if(letters == "") return this;

    var pattern = new RegExp(letters,"gi");
    return _(this.filter(function(data) {
        return pattern.test(data.get("title"));
    }));
  }  
});

观看次数：

APP.Filter = Backbone.View.extend({  

  initialize: function() {   
    var self = this;

    this.collection = new APP.NewsModelsCollection();  

    var model1 = new APP.NewsModel({title: 'qwerty'}),
        model2 = new APP.NewsModel({title: 'qwddez'}),
        model3 = new APP.NewsModel({title: 'zxxc'});

    this.collection.add(model1);
    this.collection.add(model2);
    this.collection.add(model3);

    this.render();

    $('#filterTitleField').on('keyup', function() { self.search() });
  },    

  render: function () {   
    this._createNewsUnits();
    return this;
  },

  search: function(e){  console.log('search')
    var letters = $("#filterTitleField").val();
    this.collection.search(letters);
    console.log(this.collection.models)
    this._createNewsUnits();
  },    

  _createNewsUnits: function () {  
    $('#newsList').html('');

    this.collection.each(function (news) {    
      var news = new APP.News({model: news});    
      $('#newsList').append(news.render().el);
    }, this);
  } 

});


APP.News = Backbone.View.extend({  

  initialize: function(model) {   
    this.model = model.model;
  },

  className: 'news',

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

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

});

Answer 1

你需要有 - 一个基础集合 - 包含所有模型的列表。 - 过滤后的集合 - 包含过滤后的集合。

您的代码的问题是您试图改变原始集合，因此原始集合将丢失。我已经包含了需要按照您期望的方式进行更改的文件。还要仔细检查您的正则表达式。

NewsModelCollection

search: function(letters) {
    console.log(letters)
    if (letters == "") {
        return this.models;
    }

    var pattern = new RegExp(letters, "gi");
    var filtered = this.filter(function(model) {

      //return pattern.test(model.get("title"));
      return model.get('title').indexOf(letters) > -1;
    });
    debugger;
    return filtered;
  }

过滤器

initialize: function() {
    var self = this;

    this.collection = new APP.NewsModelsCollection();

    var model1 = new APP.NewsModel({
        title: 'qwerty'
      }),
      model2 = new APP.NewsModel({
        title: 'qwddez'
      }),
      model3 = new APP.NewsModel({
        title: 'zxxc'
      });

    this.collection.add(model1);
    this.collection.add(model2);
    this.collection.add(model3);

    // Add the models to the filtered collection
    this.filteredCollection = new APP.NewsModelsCollection(this.collection.toJSON());

    this.render();

    $('#filterTitleField').on('keyup', function() {
      self.search()
    });
  },
  search: function(e) {
    console.log('search')
    var letters = $("#filterTitleField").val();
    var filteredArray = this.collection.search(letters);
    // reset your original filtered collection
    // with newly retured models
    this.filteredCollection.reset(filteredArray);
    console.log(this.filteredCollection.models);
    this._createNewsUnits();
  },

  _createNewsUnits: function() {
    $('#newsList').html('');

    // Use the filtered collection
    // and render each item
    this.filteredCollection.each(function(news) {
      var news = new APP.News({
        model: news
      });
      $('#newsList').append(news.render().el);
    }, this);
  }

jsFiddle

如何筛选模型？

how to filter models?

javascript

backbone.js