样板结构中事件中的上下文（this）

Question

我有这个带有样板结构的插件。我的问题是创建事件“controlEventoKeyUp”。 为了能够访问插件的方法，我必须忽略插件参数 bind('keyup',_{_plugin:_this_},_controlEventoKeyUp)。 这解决了我的问题，但我找到了一种简洁的方法。

这个模型还有其他解决方案吗？

(function ($, window, document, undefined) {

    var pluginName = 'controlLenInput',
        defaults = {
            maxLen: 100,
            displanCantidadActual: null,
            textUppercase: false
        };

    // The actual plugin constructor
    function Plugin(element, options) {

        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    };

    Plugin.prototype.init = function () {

        $(this.element)
            .bind('keyup', { plugin: this }, controlEventoKeyUp)
            .trigger('keyup');
    };

    Plugin.prototype.asignarValorActual = function () {

        $(this.options.displanCantidadActual)
            .html('<span>' + (this.options.maxLen - $(this.element).val().length) + '</span>&nbsp;<span>caracteres pendientes</span>');

    };

    var controlEventoKeyUp = function (event) {

        var _plugin = event.data.plugin;

        if (_plugin.options.maxLen < $(this).val().length) {
            $(this).val($(this).val().substr(0, _plugin.options.maxLen));
        }
        else {
            _plugin.asignarValorActual();
        }

        if (_plugin.options.textUppercase) { 
            $(this).val($(this).val().toUpperCase());
        }

    };

    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    }

})(jQuery, window, document);

Answer 1

查看样板模板后，我可以看到调用插件被记录在插件实例的“数据”中：

$.data(this, 'plugin_' + pluginName, new Plugin(this, options));

然后，要检索此元素的插件实例，简单地说，在事件中，我会返回它方式：

var plugin = $.data(this, 'plugin_' + pluginName);

那么事件的功能是：

var controlEventoKeyUp = function (event) {

    var _plugin = $.data(this, 'plugin_' + pluginName);

    if (_plugin.options.maxLen < $(this).val().length) {
        $(this).val($(this).val().substr(0, _plugin.options.maxLen));
    }
    else {
        _plugin.asignarValorActual();
    }

    if (_plugin.options.textUppercase) { 
        $(this).val($(this).val().toUpperCase());
    }

}

编辑

当触发“触发”事件时，当我使用“$.data”访问插件时会产生错误，因为它仍然不存在。
更改以保留插件。这样，我就可以访问已经加载的插件而不会出现错误。

// The actual plugin constructor
function Plugin(element, options) {

    this.element = element;

    this.options = $.extend({}, defaults, options);

    this._defaults = defaults;
    this._name = pluginName;

    this.element['plugin_' + pluginName] = this;
    this.init();
};

//...

var controlEventoKeyUp = function (event) {

    var _plugin = this['plugin_' + pluginName];

    if (_plugin.options.maxLen < $(this).val().length) {
        $(this).val($(this).val().substr(0, _plugin.options.maxLen));
    }
    else {
        _plugin.asignarValorActual();
    }

    if (_plugin.options.textUppercase) { 
        $(this).val($(this).val().toUpperCase());
    }

}