触发点击功能查看是否有某一类（Backbone.js的）(Trigger function on c

我有一个div由Backbone.js的视图生成。 当用户点击该div ，一类active被添加到div和功能addToSet被执行。

问题：我想被触发另一个功能，当查看的div有类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')
        });
    }
});

Answer 1:

这些事件：

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

不工作，你的排序知道为什么。 从精细的手工 ：

事件被写入格式{"event selector": "callback"} 该callback可以是在视图的方法的任一名称，或直接函数体。 省略了selector导致事件被绑定到视图的根元素（ this.el ）。

所以，你的'click': 'addToSet'结合addToSet对视图的点击el本身，而是'click .active': 'removeFromSet'结合removeFromSet的.active视图的内部元件el 。

我认为最简单的解决办法是有一个单一的事件：

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()
        });
    }
}

你可以使用一个实例变量，而不是一个CSS类来控制分支toggleInSet如果这更有意义。

Answer 2:

您是否尝试过使用：没有（。主动）选择您的活动代表之一？ 这可能有助于这两种情况之间进行区分。

事情是这样的：

events: {
   'click :not(.active)' : callback1
   'click .active' : callback2
}

文章来源: Trigger function on click if View has a certain class (backbone.js)