切换事件在第二个呼叫上发射

Question

有一个模块/视图定义：

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

或将功能绑定到按钮。视频

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