2016-08-19 36 views
1

请帮助修复脚本。 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; 
    } 

}); 
+0

你返回的过滤列表,但你不这样做与该名单什么。 'search'只是返回一个** new **列表。它不会改变你的原始。 –

回答

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