플러그인 초기화 후 플러그인에 콜백 추가하기

Question

간단한 jQuery 플러그인을 작성했습니다. 내 플러그인은 '앞으로'버튼이있는 HTML 요소를 만듭니다. 버튼은 몇 가지 작업을 수행하며 사용자가 하나를 설정하면 콜백을 호출 할 수 있습니다.

$('selector').myPlugin({onForward: function(){console.log('forward'); } }); 

을 그리고 그 작업 괜찮아요 :

나는 (옵션 1)과 같은 초기 단계에서 콜백을 추가 할 수 있습니다.

하지만 내가 만든 플러그인 (옵션 2) 후 콜백을 설정하려고하면 : 플러그인 콜백 실행되지 않고있는 상태입니다

var $plugin = $('selector').myPlugin(); 
$plugin.myPlugin('onForward',function(){console.log('forward'); }); 

.

콜백 저장에 사용하는 'defaults'변수가 있습니다. "나는"onForward "방법을 설정하면

var defaults = { 
onForward:   function(){}, // initialize with empty callback 
} 

, 디버거를 사용하여, 나는 defaults.onForward의 값이 새로운 콜백 설정되어 볼 수 있지만 버튼이 트리거 될 때, 그것은 버튼과 같은 보인다 '내가 이전에 설정 한 메서드를 잊어 버렸고 초기화에 사용 된 기본 빈 메서드를 사용합니다. 여기

플러그인 코드를 싹둑입니다 :

(function($){ 
    $.fn.myPlugin = function(methodOrOptions){ 

     var $self = $(this); 
     var defaults = { 
       onForward:  function(){}, 
     }; 
     var methods = { 
       init: function(options){ 
        $.extend(defaults,options); 
        $self.find('button#forward').on('click',events.forward); 
        return $self; 
       }, 
       onForward: function(callback){ 
        defaults.onForward  = callback; // setting the callback after initialization 
       }, 

     }; 
     var events = { 
       forward: function(){ 
        // do stuff and call the callback 
        defaults.onForward(); 
       } 
     } 
     if(methods[methodOrOptions]){ 
      return methods[methodOrOptions].apply(this,Array.prototype.slice.call(arguments, 1)); 
     } 
     else if(typeof(methodOrOptions) === 'object' || !methodOrOptions){ 
      return methods.init.apply(this,arguments) 
     } 
     else{ 
      console.log('error: method: '+methodOrOptions+' does not exists'); 
     } 

})(jQuery); 

내가 잘못 뭐하는 거지? Thx

Answer 1

myPlugin() 함수를 호출 할 때마다 실제로 defaults이라는 새 인스턴스가 생기는 것 같습니다. 따라서 첫 번째 호출에서 수정할 인스턴스는 두 번째 호출에서 수정할 인스턴스와 실제로 다른 인스턴스입니다.

$self.data("defaults", defaults) 

을 그리고는 다시 그걸 얻기 위해 :

는 구성 요소의 data() 객체의 기본값을 저장하고 다음 각 함수 호출 시간의 새로운 단위에 전화를해야이 문제를 회피하려면 앞으로 방법에, 당신은 같은 것을 할 필요가 :

onForward: function(callback){ 
    var $self = $(this);      
    $self.data("defaults").onForward = callback; 
} 

을 그리고 당신의 이벤트 핸들러는 다음과 같이 다소 같아야합니다

var events = { 
    forward: function(){ 
     $self.data("defaults").onForward(); 
    } 
} 

여기를 참조하십시오. http://jsfiddle.net/s4rjh9a4/1/