Классы Mootools и привязка

Question

У меня проблемы с доступом к классу и текущему элементу.Как я могу получить доступ как к текущему элементу, так и к классу?

// Class stuff above
fuction1 : function () {
  myelements.addEvent('click', this.function2);
},
function2 : function () {
  // "this" is the element from function1
  this.getParent('div')

  // now I need to call another function
  // But since the scope is the element, I get an error
  // If I bind function two,
  // how can I gain access to the element?
  this.function3();
}
//Class stuff below

Спасибо!

Answer 1

Вот более чистый способ.Обратите внимание, что событие уже передано методу:

var Foo = new Class({

    initialize: function() {
        this.elements = $$('li').addEvent('click', this.click.bind(this));
    },

    click: function(e) {
        console.log(this); // Foo Class
        console.log(e.target); // the clicked this.elements item
    }

});

И рабочий пример: http://jsfiddle.net/AtUgd/

Answer 2

Обратите внимание, что e.target не всегда тот элемент, который вы действительно ожидаете (тот, который вы связали).

Это элемент, по которому щелкают, так что если ваш связанный элемент содержит что-то внутри, событие щелчка получит всплывающее и сработает, но у вас будет неправильный элемент в e.target

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

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

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

Answer 3

Я обычно делаю что-то вроде этого:

FooBar = new Class({
    initialize: function() {
        this.element = $('foobar');
        this.element.addEvent('click', function(e) { this.foo(e) }.bind(this));
    },
    foo: function(e) {
        console.log( $(e.target) );
    }
});