How to get and filter data
Everything works fine in my main function, even the filter. but the problem is that whenever I click on a filter type and switch to a different filter type, it gets filtered from the existing filtered data instead of fetching new data from the server and filter ...
if i add a fetch call on my filter function, it fetch all data without filtering ... how can i fix this.?
my code:
$(document).ready(function(){
var school = {};
school.model = Backbone.Model.extend({
defaults:{
name:'no name',
age:'no age'
}
});
school.collect = Backbone.Collection.extend({
model:school.model,
url:'js/school.json',
initialize:function(){
this.sortVar = "name"
}
});
school.view = Backbone.View.extend({
tagName:'div',
className:'member',
template:$('#newTemp').html(),
render:function(){
var temp = _.template(this.template);
this.$el.html(temp(this.model.toJSON()));
return this;
}
});
school.views = Backbone.View.extend({
el:$('#content'),
events:{
'click #newData' : 'newArrival',
'click #showName' : 'showByName',
'click #showAge' : 'showByAge'
},
initialize:function(){
_.bindAll(this);
this.collection = new school.collect;
this.collection.bind('reset', this.render);
this.collection.fetch();
this.childViews = [];
},
newArrival:function(){
this.collection.fetch(); //it works fine, i use this for update
},
showByName:function(){
// this.collection.fetch(); //but i can't do this, it removes filtered data..
this.sortVar = 'name';
var filterType = _.filter(this.collection.models, function(item){
return item.get('name') != '';
})
this.collection.reset(filterType); //resets without fetching (filtering from existing datas..)
},
showByAge:function(){
// this.collection.fetch(); //but i can't do this, it removes filtered data..
this.sortVar = 'age';
var filterType = _.filter(this.collection.models,function(item){
return item.get('age') != 0;
})
this.collection.reset(filterType); //resets without fetching (filtering from existing datas..)
},
render:function(){
_.each(this.childViews, function(old){
old.remove();
});
this.childViews = [];
var that = this;
_.each(this.collection.models, function(item){
that.renderItem(item);
});
},
renderItem:function(item){
var newItem = new school.view({model:item});
this.$el.append(newItem.render().el);
this.childViews.push(newItem);
}
});
var newSchool = new school.views;
});
thanks in advance, also i have 2 more add methods that sort name and age while showing data.
+3
source to share
1 answer
This works for me .. thanks everyone.
showByAge:function(){
var that = this;
this.sortVar = 'age';
this.collection.fetch()
.done(function(){ // i am proceeding after i finish the fetch!
var filterType = _.filter(that.collection.models,function(item){
return item.get(that.sortVar) != 0;
})
that.collection.reset(filterType);
})
},
+6
source to share