Плагин jquery не может получить доступ к объекту, указанному в определении плагина - PullRequest
Новая
       1

Плагин jquery не может получить доступ к объекту, указанному в определении плагина

2 голосов
/ 30 ноября 2011

Я пытаюсь написать плагин, который бы реагировал на любые изменения в некоторых полях ввода внутри элемента dom, который я выбираю.

мое определение плагина выглядит следующим образом: 

(function($){

    var methods = {
        init : function( options ) { 
            console.log(this.obj);
            var inputs = $('input', this.obj);
            $.each(inputs, function(i, domElement){
                $(this.obj).premiumUpdatable('addEvent', $(domElement));
            })

        },
        addEvent: function(element){
            $(element).bind('change',function(){
                console.log($(element).val());
            })
        }
    };

    $.fn.premiumUpdatable = function( method ) {

        return this.each(function(){
            var obj = $(this);
            if ( methods[method] ) {
                return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
            } else if ( typeof method === 'object' || ! method ) {
                return methods.init.apply( this, arguments );
            } else {
                $.error( 'Method ' +  method + ' does not exist on jQuery.premiumUpdatable' );
            }    
        });
    };
})(jQuery);

Тогда я называю свой плагин как: 

$('div.updatable').premiumUpdatable();

Проблема в том, что когда я пытаюсь использовать console.log (this.obj) в одном из определенных методов, я всегда получаю неопределенное значение. Я хочу получить ссылку, которую я сделал в определении плагина, obj = $ (this); ... я хочу получить элемент $ (this).

Мне нужно, чтобы этот плагин был применен ко многим элементам dom на странице, но если я не могу получить ссылку на элемент dom ... я не могу точно сказать, что есть какой ....

Любая помощь будет принята с благодарностью ...

PS: Возможно, я не задаю правильные вопросы, так как я все еще новичок в разработке плагинов в jquery, но эта проблема, кажется, действительно беспокоит меня, и я не могу ее преодолеть.

Ответы [ 2 ]

1 голос
/ 02 декабря 2011

Я обернул твой код в самую прочную структуру плагинов для плагинов jquery, которую я мог найти до сих пор.Это также решит вашу проблему невозможности доступа к объекту внутри области действия вашего плагина 

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        (function($){
            $.premiumUpdatable = function(el, options){
                // set a reference to the class instance
                var base = this,
                    // store all inputs for reuse
                    inputs;

                // store the options in base.o
                base.o = $.extend({},$.premiumUpdatable.defaultOptions, options);
                // set a reference to the jquery object
                base.$el = $(el);
                // set a reference to the DOMNode
                base.el = el;

                /**
                 * @public
                 * This function can be accessed from outside the plugin scope with
                 * $('.premium').data('premiumUpdatable').publicFunction();
                 */
                this.publicFunction = function(){};

                var initInputs = function(){
                    inputs = $( 'input', base.$el.attr('id') ).each( function( i, domElement ){
                        $( domElement ).bind( 'change', function(){
                            console.log( 'input ' + $( this ).attr('id') + ' changed to: ', $( this ).val() );
                        });
                    });
                };

                /**
                 * @private
                 * self-executing constructor
                 */
                (function init(){
                    initInputs();
                })();
            };
            // defining the default options here makes it posible to change them globaly with
            // $.premiumUpdatable.defaultOption.myValue = 'value'
            // or
            // $.premiumUpdatable.defaultOption = { myValue:'value' }
            // before the first initialisation for the objects to come
            $.premiumUpdatable.defaultOptions = {};
            $.fn.premiumUpdatable = function(options){
                return this.each(function( index, element ){
                    // prevents a second initialisation of the object if data('premiumUpdatable') is already set
                    if ( undefined == $( element ).data('premiumUpdatable') ) {
                        // stores a referenze to the PluginClass, to that your able to access its public function from outside with
                        // $('.premium').data('premiumUpdatable').publicFunction();
                        $( element ).data('premiumUpdatable', new $.premiumUpdatable( element, options));
                    }
                });
            };
        })(jQuery);

        $( document ).ready( function(){
           $('.premium').premiumUpdatable();
        });
    </script>
</head>
<body>
   <div class="premium">
       <form>
           <input id="inputText" type="text" value="" /><br />
           <input id="inputPassword" type="password" value="" /><br />
           <input id="inputCheckbox" type="checkbox" value="something checked" /><br />
           <input id="inputRadio" type="radio" value="1" />
       </form>
   </div>
</body>
</html>
0 голосов
/ 02 декабря 2011

Когда вы делаете это для вызова метода init(): 

return methods.init.apply( this, arguments );

this является текущим элементом DOM, и вы, очевидно, ожидаете, что в методе init() this будет вашим плагиномinstance.

Другая проблема заключается в том, что ваше свойство obj объявлено с обратным вызовом .each(), поэтому оно все равно не будет видно в методе init().

Ссылка здесьпредлагает базовую структуру для разработки плагинов jquery: Шаблон jQuery-плагина

В дополнение к разработке плагина, здесь есть несколько ссылок на ключевое слово this в javascript.Очень важно по-настоящему понять это, я думаю, чтобы не оказаться в непонятных ситуациях при разработке:

Это ключевое слово Что такое «это» в JavaScript? ЛУЧШЕ JAVASCRIPT - ЧТО ЭТО?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...