4

我有一个div由backbone.js 生成的视图。当用户单击 this时，将向 中添加div一个类并执行该函数。activedivaddToSet

问题：我希望在 Viewdiv具有 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

您是否尝试过为您的一位事件代表使用:not(.active)选择器？这可能有助于区分这两种情况。

像这样的东西：

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

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

于 2012-07-23T23:22:42.030 回答