События в экземпляре класса с prototype.js - PullRequest
Новая
       30

События в экземпляре класса с prototype.js

3 голосов
/ 09 февраля 2012

С помощью Mootools вы можете добавить eventListener к экземпляру класса. Как это: 

var Widget = new Class({
    Implements: Events,
    initialize: function(element){
    // ...
    },
    complete: function(){
        this.fireEvent('complete');
    }
});

var myWidget = new Widget();
myWidget.addEvent('complete', myFunction);

Есть ли возможность добавить события в ссылку экземпляра в прототипе, а НЕ в документ? (Event.observe (document, "evt: eventType", eventHandler);)

1 Ответ

1 голос
/ 26 марта 2012

Пользовательские события прототипа являются связанными событиями DOM, поэтому нет способа инициировать события в классах или экземплярах без использования DOM каким-либо образом. Тем не менее, вы можете использовать пользовательские события Prototype, чтобы добавлять пользовательские события в ваши классы без особой дополнительной работы.

Несколько лет назад Тоби Лангел поделился способом добавления пользовательских событий в классы Prototype ; недостаток этого подхода заключается в том, что эти события запускаются и наблюдаются на уровне класса, то есть события, инициируемые одним экземпляром, должны быть подхвачены всеми слушателями, наблюдающими любой экземпляр этого класса.

Я сделал несколько простых модификаций в подходе Тоби, которые позволяют наблюдать за экземплярами индивидуально. Хитрость здесь заключается в использовании замыкания вокруг Class.create для создания пространства имен закрытого события для каждого экземпляра класса. Счетчик увеличивается каждый раз, когда создается новый экземпляр класса. 

var Observable = Class.create({
  fire : function(eventName, data){
    document.fire(this._namespace + ':' + eventName, data);
  },
  observe : function(eventName, callback){
    document.observe(this._namespace + ':' + eventName, callback);
  },
  stopObserving : function(eventName, callback) {
    // Probably wise to also implement this...
  }
});

var Widget = (function(){

  var namespace = 'widget', counter = 0;

  return Class.create(Observable, {
    initialize : function(){
      this._namespace = namespace + ':' + counter++;
    },
    complete : function(){
      this.fire('complete');
    }
  });

}());

var myWidget = new Widget();

myWidget.observe('complete', function(e){
  // Callback executed when 'complete' is fired on myWidget.
});
...