백본보기 동적 클래스 명

Question

메이트에 따라 트리거 이벤트는 다음 코드를 가지고 콘텐츠의 모델). 보기의 이벤트를 정의 할 때 클래스별로 필터링하는 방법이 있습니까?

감사합니다.

Answer 1

요약하면 :parent 선택기 해킹을 기꺼이하지 않는 한 선언적 events 해시를 사용할 수 없습니다. 그렇다고해도 가능한지 확실하지 않습니다.

문제는 jQuery를 선택하면 (클래스 선택 .booked 예를 들어) view's el 내 을 적용되는 요소를 정의하는 데 사용하는, 그래서 요소의 자신의 클래스는 선택에서 고려되지 않습니다.

대신 동적으로 처리기 메서드를 설정합니다. 다음과 같이 입력하십시오 :

events: { 
    'click': 'onClick' 
}, 

render: function(){ 
    if(this.model.get('id_bookings')){ 
     this.clase = 'booked'; 
     this.onClick = this.showReservation; 
    } 
    if(this.model.get('id_guests')){ 
     this.clase = 'occupied'; 
     this.onClick = this.showGuest; 
    }else{ 
     this.clase = 'free'; 
     this.onClick = this.checkIn; 
    } 
    _.bindAll(this, 'onClick'); 

    this.$el.addClass(this.clase).html(this.template(this.model.toJSON())); 
    return this; 
}, 

Answer 2

간단하게 유지하십시오. 단추에 대한 하나의 클릭 처리기를 설정하고 올바른 방법으로 프록시 처리해야합니다.

App.Views.Bed = Backbone.View.extend({ 
    tagName: 'li', 
    template: _.template(App.Templates.Bed), 

    events: { 
     'click': 'click_handler' 
    }, 

    render: function(){ 
     if(this.model.get('id_bookings')){ 
      this.clase = 'booked'; 
     } 
     if(this.model.get('id_guests')){ 
      this.clase = 'occupied'; 
     }else{ 
      this.clase = 'free'; 
     } 
     this.$el.addClass(this.clase).html(this.template(this.model.toJSON())); 

     return this; 
    }, 

    click_handler: function() { 
     if (this.$el.hasClass('booked')) { 
      this.showReservation(); 
     } else if (this.$el.hasClass('occupied')) { 
      this.showGuest(); 
     } else if (this.$el.hasClass('free')) { 
      this.checkIn(); 
     } else { 
      // oops!? 
     } 
    }, 

    checkIn: function(){ 
     console.log('Check-in form load'); 
    }, 

    showReservation: function(){ 

    }, 

    showGuest: function(){ 

    } 
});