如何過濾Backbone.js集合和重新渲染應用程序視圖？

Question

是一個總Backbone.js noob問題。我正在嘗試構建一個相當簡單的單一應用程序界面的ToDo Backbone.js示例。雖然todo項目更多地是關於用戶輸入的，但這個應用程序更多的是基於用戶選項（點擊事件）過濾數據。

我對Backbone.js和Mongoose完全陌生，一直無法找到我正在嘗試做的一個很好的例子。我已經能夠讓我的api從MongoDB集合中提取數據並將其放入Backbone.js集合中，並將其呈現在應用程序中。我不知道如何做的是過濾數據並重新呈現應用視圖。我正在嘗試按文檔中的「類型」字段進行過濾。

這裏是我的腳本：（我完全意識到需要一些重大的重構，我只是快速原型設計概念）

$(function() { 

    window.Job = Backbone.Model.extend({ 
     idAttribute: "_id", 

     defaults: function() { 
      return { 
       attachments: false 
      } 
     } 
    }); 

    window.JobsList = Backbone.Collection.extend({ 
     model: Job, 
     url: '/api/jobs', 
     leads: function() { 
      return this.filter(function(job){ return job.get('type') == "Lead"; }); 
     } 
    }); 

    window.Jobs = new JobsList; 

    window.JobView = Backbone.View.extend({ 
     tagName: "div", 
     className: "item", 
     template: _.template($('#item-template').html()), 
     initialize: function() { 
      this.model.bind('change', this.render, this); 
      this.model.bind('destroy', this.remove, this); 
     }, 
     render: function() { 
      $(this.el).html(this.template(this.model.toJSON())); 
      this.setText(); 
      return this; 
     }, 
     setText: function() { 
      var month=new Array(); 
      month[0]="Jan"; 
      month[1]="Feb"; 
      month[2]="Mar"; 
      month[3]="Apr"; 
      month[4]="May"; 
      month[5]="Jun"; 
      month[6]="Jul"; 
      month[7]="Aug"; 
      month[8]="Sep"; 
      month[9]="Oct"; 
      month[10]="Nov"; 
      month[11]="Dec"; 

      var title = this.model.get('title'); 
      var description = this.model.get('description'); 
      var datemonth = this.model.get('datem'); 
      var dateday = this.model.get('dated'); 
      var jobtype = this.model.get('type'); 
      var jobstatus = this.model.get('status'); 
      var amount = this.model.get('amount'); 
      var paymentstatus = this.model.get('paymentstatus') 

      var type = this.$('.status .jobtype'); 
      var status = this.$('.status .jobstatus'); 

      this.$('.title a').text(title); 
      this.$('.description').text(description); 
      this.$('.date .month').text(month[datemonth]); 
      this.$('.date .day').text(dateday); 
      type.text(jobtype); 
      status.text(jobstatus); 

      if(amount > 0) 
       this.$('.paymentamount').text(amount) 

      if(paymentstatus) 
       this.$('.paymentstatus').text(paymentstatus) 

      if(jobstatus === 'New') { 
       status.addClass('new'); 
      } else if (jobstatus === 'Past Due') { 
       status.addClass('pastdue') 
      }; 

      if(jobtype === 'Lead') { 
       type.addClass('lead'); 
      } else if (jobtype === '') { 
       type.addClass(''); 
      }; 
     }, 
     remove: function() { 
      $(this.el).remove(); 
     }, 
     clear: function() { 
      this.model.destroy(); 
     } 
    }); 

    window.AppView = Backbone.View.extend({ 
     el: $("#main"), 
     events: { 
      "click #leads .highlight" : "filterLeads" 
     }, 
     initialize: function() { 
      Jobs.bind('add', this.addOne, this); 
      Jobs.bind('reset', this.addAll, this); 
      Jobs.bind('all', this.render, this); 

      Jobs.fetch(); 
     }, 
     addOne: function(job) { 
      var view = new JobView({model: job}); 
      this.$("#activitystream").append(view.render().el); 
     }, 
     addAll: function() { 
      Jobs.each(this.addOne); 
     }, 
     filterLeads: function() { 
      // left here, this event fires but i need to figure out how to filter the activity list. 
     } 
    }); 

    window.App = new AppView; 

}); 

Answer 1

你試過resetting與結果的收集「領導」過濾器？

喜歡的東西

window.AppView = Backbone.View.extend({ 
    el: $("#main"), 
    events: { 
     "click #leads .highlight" : "filterLeads" 
    }, 
    initialize: function() { 
     Jobs.bind('add', this.addOne, this); 
     Jobs.bind('reset', this.render, this); //render on reset 

     Jobs.fetch(); //this triggers reset 
    }, 
    addOne: function(job) { 
     var view = new JobView({model: job}); 
     this.$("#activitystream").append(view.render().el); 
    }, 
    //add a render function 
    render: function() { 
     this.$("#activitystream").empty(); //empty out anything thats in there 

     Jobs.each(this.addOne); 
    }, 
    filterLeads: function() { 
     Jobs.reset(Jobs.leads()); //reset Jobs with only the leads 
    } 
}); 

而且你APPVIEW沒有 '渲染' 的方法，但你在這裏引用它：

Jobs.bind('all', this.render, this);