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

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

1 个答案: