Question

我有一个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

您是否曾尝试为某个活动代表使用:not(.active)选择器？这可能有助于区分这两种情况。

这样的事情：

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

Answer 2

这些事件：

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

不工作，你有点知道为什么。来自fine manual：

事件以{"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中的分支。

如果View具有某个类（backbone.js），则单击时触发功能

2 个答案: