4

divbackbone.js ビューによって生成されました。ユーザーがこれをクリックするdivと、クラスactiveが に追加されdiv、関数addToSetが実行されます。

問題:div Viewに class があるときに別の関数をトリガーしたいactive。ただし、以下に示す私の試みではaddToSet、クリックすると常に関数が実行されます。

ここで、関数から削除'click': 'addToSet'し、eventsのみを残し'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')
        });
    }
});
4

2 に答える 2

6

イベント デリゲートの 1 つに:not(.active)セレクターを使用しようとしましたか? これは、2 つのシナリオを区別するのに役立ちます。

このようなもの：

events: {
   'click :not(.active)' : callback1
   'click .active' : callback2
}
于 2012-07-23T22:46:07.913 に答える
3

これらのイベント：

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

動作しないで、あなたはその理由をある程度知っています。細かいマニュアルから：

イベントはの形式で書き込まれます{"event selector": "callback"}。はcallback、ビュー上のメソッドの名前、または直接関数本体のいずれかです。原因を省略するselectorと、イベントはビューのルート要素（）にバインドされますthis.el。

したがって、ビュー自体のクリックに'click': 'addToSet'バインドしますが、ビュー内の要素にバインドします。addToSetel'click .active': 'removeFromSet'removeFromSet.activeel

最も簡単な解決策は、単一のイベントを開催することだと思います。

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クラスの代わりにインスタンス変数を使用して分岐を制御できます。

于 2012-07-23T23:22:42.030 に答える