Переключить класс на событие щелчка мыши

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

Обратите внимание: я взял флажок вместо кнопки.