Помогите пожалуйста исправить скрипт. jsfiddle
Я создал коллекцию из моделей, которые имеют только одно поле - 'title'. Потом я вывел их на страничку в виде списка и поместил рядом текстовое поле.
Я хотел бы чтобы пользователь вводил в поле для поиска буковки, а коллекция фильтровала модели. Соответственно на страничке список перестраивался бы. Но у меня скрипт не работает.
Делал по аналогии с этим рабочим примером
models and 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"));
}));
}
});
views:
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;
}
});