1

ボイラープレートの構造を持つこのプラグインがあります。私の問題は、イベント'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);
4

1 に答える 1

0

ボイラープレートテンプレートを調べた後、呼び出し元のプラグインがプラグインのインスタンス「データ」に記録されていることがわかりました。

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

}
于 2012-01-05T17:35:23.550 に答える