javascript - Backbone View - 根据动态 className 触发事件

Question

friend 们，我有以下代码:

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

events: {
    'click .booked': 'showReservation',
    'click .occupied': 'showGuest',
    'click .free': 'checkIn'
},

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;
},

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

showReservation: function(){

},

showGuest: function(){

}

});

我试图根据 className(我根据内容的模型设置)来触发不同的方法。

定义 View 事件时是否可以按类进行过滤？

谢谢!

Answer 1

简而言之，不可能使用声明性 events 哈希，除非您愿意做一些 :parent 选择器 hack，我不确定这是否是甚至有可能。

问题在于，您用来定义元素的任何 jQuery 选择器(例如类选择器 .booked)都被应用在 View 的 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;
},