jquery vars 이벤트에

Question

이벤트에 관한 약간의 문제가 있습니다. 그래서 나는 다른 플러그인이라고 불리는 플러그인 허풍을 가지고 있고, jquery 엘리먼트를 메인 플러그인으로 불리는 플러그인으로부터 얻고 싶다. 패널 : 정의되지 않은 onchange를 :

(function($) { 
    $.fn.meRadioCheck = function(options, callback) { 
     options = $.extend($.fn.meRadioCheck.defaults, options); 
     var plugin = this; 

     plugin.init = function() { 
      return this.each(function() { 
       var $this = $(this); 
       var $span = $('<span/>'); 
       var name = $this.attr('name'); 

       /* here some stuff... */ 

       /* check for Events */ 
       if (($._data(this, "events") == null)) { 

        /* Change Event an Element binden */ 
        $this.bind("xonChange", function() { 
         options.CheckBox_onChange.call($this) 
        }); 

        $this.on({ 
         change: function() { 
          /* here some stuff... */ 

          /* throw Change Event */ 
          $this.trigger("xonChange"); 
         }, 
        }); 
       }; 
      }); 
     } 

     return this.each(function() { 
      var $this = $(this); 
      var name = $this.attr('name'); 

      if (options.checked != $this.prop('checked')) { $this.click(); } 
      if (options.disabled) { $this.prop('disabled', true) } else { $this.prop('disabled', false) } 
     }); 
    }; 

    // Standard-Optionen für das Plugin 
    $.fn.meRadioCheck.defaults = { 
     'checked': false,         /* This Checkbox or Radio Button is checked */ 
     'debug': false,         /* Debug Modus für das Plugin ein od. ausschalten */ 
     'disabled': false,         /* This Checkbox or Radio Button is disabled */ 

     'CheckBox_onChange': function(el) {}, 
     'RadioButton_onChange': function(el) {} 
    } 
})(jQuery); 



(function($) { 
    $.panel = function(options, callback) { 

     $('input[type=checkbox], input[type=radio]').meRadioCheck({ 

      CheckBox_onChange: function(el) { 
       /* some stuff here... */ 
       window.console.debug('panel: ' + typeof(el) + ', onChange: ', [el]) 
      } 
     }); 
    } 
})(jQuery); 

난 단지 콘솔이 얻을 [정의]

을하지만 난 체크 박스 또는의 RadioButton을 싶어. 누군가가 나를 도울 수 있기를 바랍니다 ...

감사 ... 좋은 주말 보내세요.

Answer 1

방법에 대해 :

.init() 제거, 어떤 목적에 봉사하는 것 같지 않았어요 건 졌어요

(function($) { 
    $.fn.meRadioCheck.defaults = { 
     'debug': false,    /* debug-mode for plugin */ 
     'checked': false,    /* this checkbox or radio button is checked */ 
     'disabled': false,    /* this checkbox or radio button is disabled */ 
     'CheckBox_onChange': null, 
     'RadioButton_onChange': null 
    }; 
    $.fn.meRadioCheck = function(overrideOptions, callback) { 
     var plugin = this, 
      options = $.extend($.fn.meRadioCheck.defaults, overrideOptions); 

     return this.each(function() { 
      var $this = $(this), 
       name = $this.attr('name'); 

      if (!$this.data().meRadioCheckInitDone) { 
       $this.on("change", function() { 
        if (typeof options.CheckBox_onChange === "function") { 
         options.CheckBox_onChange.call(this); 
        } 
       }).data("meRadioCheckInitDone", true); 
      } 

      $this.prop('checked', !!options.checked); 
      $this.prop('disabled', !!options.disabled); 
     }); 
    }; 
})(jQuery); 

변경

• .
• 내부 API 함수를 호출하는 대신 초기화를 통해 변수를 확인하는 대신 .data() 변수를 사용했습니다. 깨끗하게 보입니다.
• 사용자 정의 xonChange 이벤트를 없애면 change으로 청취하는 것은 기능을 호출하면됩니다.
• typeof 이벤트 콜백 검사가 추가되었습니다.
• 설정 $this.prop()은 무조건 if-then-else보다 더 깨끗하게 보입니다.

좀 더 일반적인 참고로, 어떤 종류의 데이터 바인딩을 구현하는 것 같습니다. 어쩌면 knockout.js와 같은 데이터 바인딩 프레임 워크를 살펴 보는 것이 그만한 가치가 있습니다.