在鼠标点击事件上切换课程

Question

我有一个Backbone.View，它呈现一个集合并通过鼠标单击进行过滤。我需要添加类active到我点击的按钮，但问题是，按钮是这个视图的一部分，每当我尝试addClass或toggleClass它只是再次默认类呈现。这是我的观点：

var ResumeList = Backbone.View.extend({ 
    events: { 
     'click #active': 'showActive', 
     'click #passed': 'showPassed' 
    }, 
    initialize: function() { 
     this.collection = new ResumeCollection(); 
    }, 

    render: function (filtered) { 
     var self = this; 
     var data; 
     if (!filtered) { 
      data = this.collection.toArray(); 
     } else { 
      data = filtered.toArray(); 
     } 
     this.$el.html(this.template({ collection: this.collection.toJSON() }); 

     _.each(data, function (cv) { 
      self.$el.append((new ResumeView({model: cv})).render().$el); 
     }); 
     return this;  
    }, 

    showActive: function() { 
     this.$('#active').toggleClass('active'); 
     // a function that returns a new filtered collection 
     var filtered = this.collection.filterActive(); 
     this.render(filtered); 
    } 
}); 

但正如我已经告诉，我需要的类切换或添加只是片刻，然后视图再次渲染并设置为默认类。有什么办法可以解决这个问题吗？

Answer 1

我简化了渲染并添加了一些优化。

因为我们没有你的模板，我改变了它，使优化：

<button id="active" type="button">Active</button> 
<button id="passed" type="button">Passed</button> 
<div class="list"></div> 

那么你的列表视图可能是这样的：

var ResumeList = Backbone.View.extend({ 
    events: { 
     'click #active': 'showActive', 
     'click #passed': 'showPassed' 
    }, 
    initialize: function() { 
     this.childViews = []; 
     this.collection = new ResumeCollection(); 
    }, 

    render: function() { 
     this.$el.html(this.template()); 
     // cache the jQuery element once 
     this.elem = { 
      $list: this.$('.list'), 
      $active: this.$('#active'), 
      $passed: this.$('#passed') 
     }; 
     this.renderList(); // default list rendering 
     return this; 
    }, 

    renderList: function(collection) { 
     this.elem.$list.empty(); 
     this.removeChildren(); 
     collection = collection || this.collection.models; 

     // Underscore's 'each' has a argument for the context. 
     _.each(collection, this.renderItem, this); 
    }, 
    renderItem: function(model) { 
     var view = new ResumeView({ model: model }); 
     this.childViews.push(view); 
     this.elem.$list.append(view.render().el); 
    }, 

    showActive: function() { 
     this.elem.$active.toggleClass('active'); 

     var filtered = this.collection.filterActive(); 
     this.renderList(filtered); 
    }, 

    /** 
    * Gracefully call remove for each child view. 
    * This is to avoid memory leaks with listeners. 
    */ 
    removeChildren: function() { 
     var view; 
     while ((view = this.childViews.pop())) { 
      view.remove(); 
     } 
    }, 
}); 

其他信息：

• Managing Views and Memory Leaks
• Underscore's each（请注意第三个参数）
• 尽量避免callback hell，使回调可重复使用（如renderItem）

Answer 2

我编辑了这个片段，你可以试试这个。

var ResumeList = Backbone.View.extend({ 
      events: { 
       'click #active': 'filterActive', 
       'click #passed': 'showPassed' 
      }, 

      toggleElement: undefined, 

      initialize: function() { 
       this.collection = new ResumeCollection(); 
      }, 

      render: function (filtered) { 
       var self = this; 
       var data; 
       if (!filtered) { 
        data = this.collection.toArray(); 
       } else { 
        data = filtered.toArray(); 
       } 
       this.$el.html(this.template({ collection: this.collection.toJSON() }); 

       _.each(data, function (cv) { 
        self.$el.append((new ResumeView({model: cv})).render().$el); 
       }); 
       return this;  
      }, 

      filterActive: function (evt) { 

       this.toggleElement = this.$el.find(evt.currentTarget); 
       // a function that returns a new filtered collection 
       var filtered = this.collection.filterActive(); 
       this.render(filtered); 
       this.toggleActive(); 
      }, 

      toggleActive: function() { 

       if(this.toggleElement.is(':checked')) { 
        this.$el.find('#active').addClass('active'); 
       } else { 
        this.$el.find('#active').removeClass('active'); 
       } 
      } 
     }); 

请注意：我采取了复选框元素而不是按钮。