ボイラープレート構造のイベントでのコンテキスト（this）

Question

ボイラープレートの構造を持つこのプラグインがあります。私の問題は、イベント 'controlEventoKeyUp'を作成することです。 プラグインのメソッドにアクセスできるようにするために、プラグインパラメータbind('keyup',_{_plugin:_this_},_controlEventoKeyUp)を無視しなければなりませんでした。 これは私の問題を解決しましたが、私はこれを行うきちんとした方法を見つけました。

このモデルには他に解決策がありますか？以下のためのプラグインのインスタンスを取得し、その後、

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

：

(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

定型テンプレート上で見た後、私はプラグインを呼び出して、「データ」のプラグインのインスタンスを記録していることを見ることができましたこの要素は、単に、イベントでは、私はそれをバックこの方法を取得：

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

} 

編集 "トリガー" イベントが発生したよう

、私は「$とプラグインにアクセスします。データがまだ存在しないためエラーが発生します このようにして、このようにプラグインを保持するように変更すると、既にエラーなくロードされているプラ​​グインにアクセスすることができます。

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

}