Question

Mates，我有以下代码：

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（我根据内容的模型设置）。

在定义视图的事件时，有没有办法按类过滤？

谢谢！

Answer 1

简而言之，使用声明式events哈希是不可能的，除非你愿意做一些:parent选择器黑客攻击，而且我也不确定这是否可行。

问题是你用来定义元素的任何jQuery选择器（例如类选择器.booked）都在视图的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(){

    }
});

骨干视图 - 根据动态className触发事件

2 个答案: