асинхронно добавляет события в магистраль

Question

В основе, как вы асинхронно добавляете события на основе других событий. Я хочу разрешить обработчики кликов на определенном наборе кнопок, но не до тех пор, пока не будет нажата кнопка, содержащая их. Вот как у меня есть вещи созданы на данный момент:

var ProductsView = Backbone.View.extend({ 


    events : { 
     "click .filter-options-container" : "filterOptionContainerClick" 
    }, 

    filterOptionContainerClick: function(e){ 
    $(e.currentTarget).addClass('active'); 
    //want to add an event to all .filter-options to allow them to trigger the filterOptionClick function when clicked 
    }, 

    filterOptionClick: function(e){ 
    $('.filter-option').removeClass('active'); 
    $(e.currentTarget).addClass('active'); 
    $('.filter-options-container').removeClass('active'); 
    } 

}); 

return ProductsView; 

Answer 1

Вместо добавления click обработчики для суб-кнопок, когда контейнер будет нажата, вы можете использовать другой подход:

1. регистра суб-кнопок click обработчики один раз с events карта.
2. добавить булево свойство в View для сохранения состояния контейнера щелчка
3. тумблера этого свойства в filterOptionContainerClick обработчике
4. зависит от стоимости имущества, разрешить/запретить, нажав на подразделам кнопке

Так что код должен выглядеть следующим образом:

var ProductsView = Backbone.View.extend({ 

    events : { 
     "click .filter-options-container" : "filterOptionContainerClick", 
     "click .filter-options" : "filterOptionClick" // register sub-buttons' click handlers 
    }, 
    initialize: function() { 
     this.enabled = false; // state of the container click 
    }, 

    filterOptionContainerClick: function(e){ 
     this.enabled = !this.enabled; 
     if (this.enabled) $(e.currentTarget).addClass('active'); 
     else $(e.currentTarget).removeClass('active'); 
    }, 

    filterOptionClick: function(e){ 
     if (!this.enabled) return; 
     $('.filter-option').removeClass('active'); 
     $(e.currentTarget).addClass('active'); 
     $('.filter-options-container').removeClass('active'); 
    } 

});