모델을 필터링하는 방법은 무엇입니까?

Question

스크립트 수정에 도움주세요. jsfiddle

나는 모델 수집을 위해 단순히 필터를 만듭니다. 모든 모델에는 '제목'필드가 있습니다. 페이지 구성 : 제목 및 검색 필드 목록.

검색 필드에 사용자가 입력 한 문자가 있지만 제목 목록은 필터링되지 않습니다. 이 문제

모델과 모음 :

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 당신은 필터링 된 목록을 반환하고 그러나 당신이 그 목록에 아무것도하지 않는

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