보기가 특정 클래스 (backbone.js)를 가지고있는 경우 클릭시 트리거 기능

Question

나는 backbone.js보기에 의해 생성 된 div을 가지고 있습니다. 사용자가 div을 클릭하면 active 클래스가 div에 추가되고 addToSet 함수가 실행됩니다.

문제 :보기의 div에 active 클래스가있을 때 다른 기능이 실행되기를 원합니다. 그러나 아래에 표시된 시도는 클릭했을 때 항상 실행되는 addToSet 기능을 발생시킵니다.

events 함수에서 'click': 'addToSet'을 제거하고, 단지 'click .active': 'removeFromSet'로 남겨 둡니다. div을 클릭해도 아무런 일도 일어나지 않습니다! 이것은 이벤트 처리기가 뷰 내부의 요소 인 div을 선택할 수 없기 때문입니까?

이 문제를 어떻게 해결할 수 있습니까? 감사!

JS 코드

SetView = Backbone.View.extend({ 
    tagName: 'div', 
    className: 'modal_addit_set', 

    template: _.template($('#tpl_modal_addit_set').html()), 

    events: { 
     'click': 'addToSet', 
     'click .active': 'removeFromSet' 
    }, 

    initialize: function(opts) { 
     this.post_id = opts.post_id; 
    }, 

    render: function() { 
     $(this.el).html(this.template(this.model.toJSON())); 
     if(this.model.get('already_added')) 
      $(this.el).addClass('active'); 
     return this; 
    }, 

    addToSet: function() { 
     $.post('api/add_to_set', { 
      post_id: this.post_id, 
      set_id: this.model.get('id'), 
      user_id: $('#user_id').val() 
     }); 
    }, 

    removeFromSet: function() { 
     $.post('api/remove_from_set', { 
      post_id: this.post_id, 
      set_id: this.model.get('id') 
     }); 
    } 
}); 

Answer 1

이러한 이벤트는 :

events: { 
    'click': 'addToSet', 
    'click .active': 'removeFromSet' 
} 

작동하지 않습니다 그리고 당신은 종류의 이유를 알고있다. fine manual :

이벤트는 {"event selector": "callback"}의 형식으로 기록됩니다. callback은 뷰의 메소드 이름이거나 직접 함수 본문 일 수 있습니다. selector을 생략하면 이벤트가 뷰의 루트 요소 (this.el)에 바인드됩니다.

그래서 당신의 'click': 'addToSet' 뷰의 el 자체에 대한 클릭에 addToSet을 결합하지만 'click .active': 'removeFromSet'는 내부 .active 요소 에 removeFromSet 바인드 뷰의 el. 다음

events: { 
    'click': 'toggleInSet' 
} 

과 :

toggleInSet: function() { 
    if(this.$el.hasClass('active')) { 
     $.post('api/remove_from_set', { 
      post_id: this.post_id, 
      set_id: this.model.get('id') 
     }); 
    } 
    else { 
     $.post('api/add_to_set', { 
      post_id: this.post_id, 
      set_id: this.model.get('id'), 
      user_id: $('#user_id').val() 
     }); 
    } 
} 

당신은 toggleInSet에서 분기 제어하는 ​​대신 CSS 클래스의 인스턴스 변수를 사용할 수

내가 가장 쉬운 해결책은 하나의 이벤트를 가질 생각 그게 더 합리적이라면.

Answer 2

는 이벤트 참가자 중 하나에 대한 :not(.active) 선택기를 사용하려고 있나요? 이것은 두 시나리오를 구별하는 데 도움이 될 수 있습니다. 이 같은

뭔가 :

events: { 
    'click :not(.active)' : callback1 
    'click .active' : callback2 
}