title: Backbone.js - unable to get the model inside the filter function
body: <p>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...</p>
  
  <p>they way i doing is wrong..? any one guide me please?</p>
  
  <p>my complete code :</p>
  
  <pre><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 &lt;= 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 &lt;= 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 &lt; currVal ? 1 : startVal &gt; currVal ? -1 :'';
              showing += dir * column
              var update = showing &gt; prop.modelSize ? prop.modelSize : showing;
              stepMin.text(update);
           }
        });
  
        slideElement.find('.ui-slider-handle')
        .wrap(
           $('&lt;div /&gt;').css({
              position:'relative',
              marginRight:slideElement.find('.ui-slider-handle').width(),
              height:'100%'
           })
        );
  
      }
    });
  
    var boards = new taskListPhraseI.allView();
  
  }
  </code></pre>
  
  <p>Json sample :</p>
  
  <pre><code>{
      "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"
  
  }
  </code></pre>
  
  <p>error:</p>
  
  <pre><code>undefined
  
  tasklist.js (line 33)
  
  TypeError: item is undefined
  </code></pre>
  
  <p>Thanks in advance</p>