如果 View 具有某个类(backbone.js)，则单击时触发功能 [英] Trigger function on click if View has a certain class (backbone.js)

问题描述

我有一个由backbone.js 视图生成的div.当用户点击这个div时，会在div中添加一个类active，并执行addToSet函数.

I have a div generated by a backbone.js view. When the user clicks on this div, a class active is added to the div and the function addToSet is executed.

问题:我希望在视图的 div 具有 active 类时触发另一个函数.但是，我在下面显示的尝试总是导致 addToSet 函数在单击时运行.

Problem: I want another function to be triggered when the View's div has the class active. However, my attempt shown below always cause addToSet function to run when its clicked.

现在，我从 events 函数中删除 'click': 'addToSet'，只留下 'click .active': 'removeFromSet'>.点击 div 不会导致任何事情发生！这是因为事件处理程序无法选择视图本身的 div，只能选择其中的元素吗?

Now, I remove 'click': 'addToSet' from the events function, leaving only 'click .active': 'removeFromSet'. Clicking on the div does not cause anything to happen! Is this because the event handler cannot select the div of the view itself, just the elements inside it?

知道如何解决这个问题吗?谢谢！

Any idea how I can solve this problem? Thanks!

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

推荐答案

这些事件:

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

不工作，你知道为什么.来自精美手册:

don't work and you sort of know why. From the fine manual:

事件以 {"event selector": "callback"} 格式编写.callback 可以是视图上方法的名称，也可以是直接的函数体.省略 selector 会导致事件绑定到视图的根元素 (this.el).

Events are written in the format {"event selector": "callback"}. The callback may be either the name of a method on the view, or a direct function body. Omitting the selector causes the event to be bound to the view's root element (this.el).

所以你的 'click': 'addToSet' 将 addToSet 绑定到视图的 el 本身上的点击，但是 'click .active': 'removeFromSet' 将 removeFromSet 绑定到 .active 元素 inside 视图的 el.

So your 'click': 'addToSet' binds addToSet to a click on the view's el itself but 'click .active': 'removeFromSet' binds removeFromSet to a .active element inside the view's el.

我认为最简单的解决方案是只有一个事件:

I think the easiest solution is to have a single event:

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 中的分支.

You could use an instance variable instead of a CSS class to control the branching in toggleInSet if that makes more sense.

这篇关于如果 View 具有某个类(backbone.js)，则单击时触发功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！