Класс Mootools - хранение ссылки на тело документа в свойстве класса - PullRequest
Новая
       20

Класс Mootools - хранение ссылки на тело документа в свойстве класса

0 голосов
/ 29 марта 2011

Приветствую всех! Я пытаюсь выучить классы Mootools. Я создал этот класс, чтобы добавить div на страницу. 

var F = new Class({

    Implements: [Options, Events],

    options: {
        container: document.body,
        width: '250px',
        background: '#ccc'
    },

    initialize: function(options) {
        this.setOptions(options);
        this.addDemoDiv();
    },

    addDemoDiv: function() {
        var dDiv = new Element('div', {
            'class': 'myClass',
            html: 'Click me!',
            styles: {
                padding: '20px',
                border: '1px solid #999',
                width: this.options.width,
                background: this.options.background
            },
            events: {
                click: this.animate
            }
        });

        dDiv.inject(this.options.container);
    },

    animate: function() {
        alert('Hello world');
    }

});

window.addEvent('domready', function() {

    var item = new F();

});

Предполагается, что пользователь должен указать контейнер, в который будет вставляться div, а тело документа будет использоваться по умолчанию. Когда я делаю это, как описано выше, код проверяет OK, но сценарию не удается добавить div - Firebug и Chrome жалуются на то, что контейнер нулевой или неопределенный.

Я должен изменить dDiv.inject(this.options.container); на это 

if (!this.container) {
    dDiv.inject(document.body);
} else {
    dDiv.inject(this.container);
}

чтобы все заработало.

Может ли какой-нибудь мудрый ниндзя Mootools сказать мне, почему инъекция работает, когда я передаю document.body напрямую, но прерывается, когда я пытаюсь передать ему ссылку на document.body, предположительно хранящуюся в опции контейнера класса? Я пробовал варианты для document.body, такие как «document.body» и $$ («document.body») и $$ (document.body).

1 Ответ

2 голосов
/ 29 марта 2011

Я предполагаю, что document.body недоступен, когда ваш код класса интерпретируется, обычно это происходит, когда ваш скрипт помещен в теги <head>. Перемещение ваших скриптов в конец документа (непосредственно перед </body>) решает много проблем и является хорошей практикой, так как ваши скрипты больше не будут блокировать рендеринг HTML.

Также лучше избегать размещения статических ссылок DOM по умолчанию в вашем классе, поскольку их доступность всегда сомнительна. Вы можете оставить options.container пустым и изменить свой метод на: 

... code ...
dDiv.inject( this.options.container || document.body );
... code ...

Так что, если this.options.container не установлено (ложно), по умолчанию оно будет document.body, таким образом, вы также можете сохранить свои сценарии в <head>, если вы действительно хотите.

...