Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Backbone.js-无法在筛选器函数中获取模型_Backbone.js_Backbone.js Collections - Fatal编程技术网

Backbone.js-无法在筛选器函数中获取模型

Backbone.js-无法在筛选器函数中获取模型,backbone.js,backbone.js-collections,Backbone.js,Backbone.js Collections,在我的项目中,我使用filter方法返回一个数据,在filter外我得到对象,但在filter内得到未定义的 他们认为我这样做是不对的。。?有人给我引路吗 我的完整代码: var taskListGenerator = function(params){ var taskListPhraseI = {}, column=params.column, leftSpine=params.leftSpine, topSpine = params.topSpine;//workspac

在我的项目中,我使用filter方法返回一个数据,在filter外我得到对象,但在filter内得到未定义的

他们认为我这样做是不对的。。?有人给我引路吗

我的完整代码:

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();

}
错误:

undefined

tasklist.js (line 33)

TypeError: item is undefined

提前感谢

我将我的数组返回从filter in转换为collection,发送回collection方法,如下所示。。它工作正常

 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)); 
//发送回集合将数组转换为集合,解决了此问题。 这个。呈现(值); }); },

谢谢大家

 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));