Как вызвать это в функции в классе MooTools

Question

У меня проблемы с реализацией классов в mootools, поскольку я не могу использовать 'this' при отправке методов, скажем, element.addEvent.

Скажите, у меня есть класс mootools:

var Dude = new Class({

    highlightColor: '#f00',

    doStuff: function() {
        var parent = $('theParentId');

        new Element('div', {'html': 'Click me'})
            .inject(parent)
            .addEvent('click', function(){

                new Element('div', {'html': 'you clicked'})
                    .highlight(this.highlightColor);

            });
    },

});

Этот код будет генерировать исключение внутри вызова метода addEvent, поскольку this внезапно находится в другом контексте. Есть ли какой-то другой способ получить объект highlightColor (или любой другой член, который может иметь класс mootools)?

Answer 1

вам необходимо привязать ссылку this к функции каждый раз, когда вы используете функцию (addEvents или each)

var Dude = new Class({

    highlightColor: '#f00',

    doStuff: function() {
        var parent = $('theParentId');

        new Element('div', {'html': 'Click me'})
            .inject(parent)
            .addEvent('click', function(){

                new Element('div', {'html': 'you clicked'})
                    .highlight(this.highlightColor);

            }.bind(this));
    }
});

Будьте осторожны с последней комойв функции doStuff ... firefox похож на мать, это простит вас, но iexplorer - это bmf, он выдаст ошибку и не скажет вам, почему

Answer 2

@ CMS был на правильном пути, но bindWithEvent теперь устарел, и документация предлагает использовать вместо этого код:

myElement.addEvent('click', function(e){
    myFunction.call(bind, e);
});

Если вы хотите передать событиеПривязав элемент к одному из ваших методов класса, вы можете сделать это следующим образом:

var self = this; // 'this' is class reference
elements.addEvent('click', function(e){
    self.myClassMethod(this, e); // now 'this' is clicked element
});

Теперь вы получили правильный элемент, переданный в ваш метод и готовый к манипулированию.

Answer 3

"MooTools way" будет использовать функцию bindWithEvent:

var Dude = new Class({

    highlightColor: '#f00',

    doStuff: function() {
        var parent = $('theParentId');

        new Element('div', {'html': 'Click me'})
            .inject(parent)
            .addEvent('click', function(event){

                new Element('div', {'html': 'you clicked'})
                    .highlight(this.highlightColor); // <- `this` refers to the 
            }.bindWithEvent(this));                  //    outer `this` value
    },
    //...
});

Этот метод позволяет сохранить значение this для функции и при необходимости передать дополнительные аргументы.

Первый аргумент связанной функции будет ссылаться на объект Event инициируемого события.