モデルをフィルタリングする方法は？

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

あなたが れている必要があります - 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