Backbone.js - unable to get the model inside the filter function - backbone.js

Question

In my project i am returning a data using filter method, out of filter i am getting the object, but inside the filter getting as undefined...
they way i doing is wrong..? any one guide me please?
my complete code :
var taskListGenerator = function(params){
var taskListPhraseI = {},
column=params.column,
leftSpine=params.leftSpine,
topSpine = params.topSpine;//workspace to phrase one;
taskListPhraseI.model = Backbone.Model.extend({
url : 'data/data.json',
defaults:{
"id" :"id",
"title" :"Title",
"projectName" :"project",
"dueDays" :0,
"dueTime" :0,
"dueDate" :"0-0-0000",
"totalTasks" :0,
"taskCompleted" :0,
"percent" :65,
"taskStatus" :"Assigned",
"jobtype" :"vip",
"username" :"scott.pierce#groupfmg.com",
"notes" :"notes1"
}
});
taskListPhraseI.collection = Backbone.Collection.extend({
model:taskListPhraseI.model,
url : 'data/data.json',
resetWithFilter : function(data,type) {
var filtered = data.models.filter(function (item) {
return item.get("dueDays") === type;
});
return filtered;
}
});
taskListPhraseI.oneView = Backbone.View.extend({
template:$('#boardTemplate').html(),
render:function(){
var temp = _.template(this.template);
return temp(this.model.toJSON());
}
});
taskListPhraseI.allView = Backbone.View.extend({
el:$('.boardHolder'),
events:{
'click span.green' : 'filterIt'
},
initialize:function(){
var that = this;_.bindAll(this);
this.collection = new taskListPhraseI.collection();
this.collection.fetch({success:that.render});
this.on('change:filterType', this.setNewType);
//this.on('reset:filterType', this.setNewType);
},
setNewType:function(){
var newCollection = new taskListPhraseI.collection();
newCollection.fetch({context:this,update:true})
.done(function(){
this.collection.reset(newCollection,{ silent: true })
var values = newCollection.resetWithFilter(newCollection,this.filterType);
this.render(values);
});
},
filterIt:function(e){
this.filterType = parseInt($(e.target).text());
this.trigger('change:filterType');
},
localVariable:{
numElement:0,
modelSize:0,
stepElement:$('.stepValue'),
stepRange : $('.stepRange'),
stepWidth:0,
compoundWidth:0,
viewProter : $('.stepRangeCompound')
},
render:function(data){
this.localVariable.modelSize = this.collection.models.length;
console.log(data) // first time work fine, while it work on click event, show the error
_.each(data.models, function(item){
this.renderBoard(item)
},this);
},
renderBoard:function(item){
var singleView = new taskListPhraseI.oneView({model:item}),
board = this.$el.append(singleView.render()),
newBoard = board.find('.indBoard:last');
this.positionBoards(newBoard);
},
positionBoards:function(tag){
var prop = this.localVariable,
boardWidth = tag.outerWidth(),
boardHeight = tag.outerHeight(),
topVal = prop.numElement % column,
lftVal = Math.floor(prop.numElement / column),
holderWidth = 0;
prop.stepWidth = boardWidth,
prop.compoundWidth = $('.stepRangeCompound').width();
this.$el.css({
height: (boardHeight+topSpine) * column,
width : Math.ceil((prop.numElement+1) / column) * (boardWidth+leftSpine),
});
holderWidth = this.$el.width();
if(holderWidth <= prop.compoundWidth){
$('.stepRange').hide();
}else{
$('.stepRange').show();
}
tag.css({
left:(boardWidth * lftVal) + (lftVal * leftSpine),
top:boardHeight * topVal + (topVal* topSpine),
});
prop.numElement++;
if(prop.modelSize === prop.numElement){
this.initStepScroll();
}
},
initStepScroll:function(){
var prop = this.localVariable,
stepNavi = prop.stepElement,
stepMin = stepNavi.find('.stepMin'),
stepMax = stepNavi.find('.stepMax'),
stepHandler = prop.stepRange,
maxScrollable = this.$el.width() - prop.compoundWidth,
accomadable = Math.floor(prop.viewProter.width() / prop.stepWidth),
showing = accomadable * column <= prop.modelSize ? accomadable * column : prop.modelSize,
startVal = 0,
that = this;
stepMax.text(prop.modelSize);
stepMin.text(showing)
var slideElement = stepHandler.slider({
min:0,
max:maxScrollable,
step:prop.stepWidth,
slide:function(i,ob){
startVal = Math.abs(parseInt(that.$el.css('marginLeft')));
that.$el.css({
marginLeft:-ob.value
});
var currVal = Math.abs(parseInt(that.$el.css('marginLeft')));
var dir = startVal < currVal ? 1 : startVal > currVal ? -1 :'';
showing += dir * column
var update = showing > prop.modelSize ? prop.modelSize : showing;
stepMin.text(update);
}
});
slideElement.find('.ui-slider-handle')
.wrap(
$('<div />').css({
position:'relative',
marginRight:slideElement.find('.ui-slider-handle').width(),
height:'100%'
})
);
}
});
var boards = new taskListPhraseI.allView();
}
Json sample :
{
"id" :1, "title" :"Title1",
"projectName" :"project1", "dueDays":7,
"dueTime":2.45, "dueDate":"12-12-2010",
"totalTasks" :15, "taskCompleted" :10,
"taskStatus" :"Assigned", "jobtype"
:"vip", "username"
:"scott.pierce#groupfmg.com", "notes"
:"notes1"
}
error:
undefined
tasklist.js (line 33)
TypeError: item is undefined
Thanks in advance

Answer 1

i converted my array return from filter in to collection, sending back to collection method like this.. it work correctly
setNewType:function(){
var newCollection = new taskListPhraseI.collection();
newCollection.fetch({context:this,update:true})
.done(function(){
var values = new taskListPhraseI.collection(newCollection.resetWithFilter(newCollection,this.filterType));
// send back to collection to convert array became collections, it solves the issue.
this.render(values);
});
},
thanks all.