javascript - 切换事件在第二次调用时触发

Question

有一个模块/ View 定义:

define(['jquery', 'underscore', 'backbone', 'text!templates/product.html'], 
function($, _, Backbone, productTemplate) {
    var ProductView = Backbone.View.extend({
        tagName: "li",
        className: "span3",
        events: {
            "click button.view-details": "viewDetailed"
        },
        viewDetailed: function(e) {
            var _view = this;
            $(e.currentTarget).toggle(
                function() {
                    $(this).find('i').removeClass('icon-eye-open');
                    $(this).find('i').addClass('icon-eye-close');
                },
                function() {
                    $(this).find('i').removeClass('icon-eye-close');
                    $(this).find('i').addClass('icon-eye-open');
                }
            );
        },
        initialize: function() {
            this.model.bind('change', this.render, this);
            this.model.bind('destroy', this.close, this);
        },
        render: function() {
            var compiledTemplate = _.template(productTemplate, this.model.toJSON());
            this.$el.append(compiledTemplate);
            return this;
        }
    });
    return ProductView;
});

第一次按 button.view-details 没有任何效果(据我所知，它只是注册了 toggle 事件)。如何正确定义它？

Answer 1

这应该是你所需要的

viewDetailed: function(e) {
        var _view = this;
        $(e.currentTarget).toggle(
            function() {
                $(this).find('i').toggleClass('icon-eye-closed icon-eye-open');
        });
    }

或者只是将函数绑定(bind)到 button.view-details

$('button.view-details').on('click', function() {
    var _view = this;
    $(this).find('i').toggleClass('icon-eye-closed icon-eye-open');
});