如何過濾模型？

Question

請幫助修復腳本。 jsfiddle

我簡單地過濾收集模型。每個模型都有字段'標題'。頁面包含：標題和搜索欄的列表。

用戶在searchfield中輸入字母，但標題列表未被過濾。這問題

模型和集合：

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