0

メイト、私は次のコードを持っています：

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（コンテンツのモデルに応じて設定）に応じて異なるメソッドをトリガーしようとしています。

ビューのイベントを定義するときにクラスでフィルタリングする方法はありますか？

ありがとう！

4

2 に答える 2

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;
},
于 2013-02-07T22:02:21.140 に答える
1

複雑にしないでおく。ボタンに 1 つのクリック ハンドラを設定し、適切なメソッドにプロキシさせるだけです。

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(){

    }
});
于 2013-02-07T22:12:19.697 に答える