Question

162

Custom Events in CLASS

rated 0 times [ 165] [ 3] / answers: 1 / hits: 31111 / 11 Years ago, tue, june 18, 2013, 12:00:00

I need to launch custom events from CLASS. I know to do this with DOM objects and jquery, using triggerHandler, like $(object)..triggerHandler(inputChange, {param:X});
The problem is when i try this with a Class, like this:

    var MyClass = (function(){



        var static_var = 1;



        var MyClass = function () {



            var privateVar;

            var privateFn = function(){ alert('Im private!'); };



            this.someProperty = 5;

            this.someFunction = function () {

                alert('Im public!');

            };

            this.say = function() {

                alert('Num ' + this.someProperty);

                $(this).triggerHandler(eventCustom);

            }

            this.alter = function() {

                this.someProperty ++;

            }

        };



        return MyClass;



    })();



    TheClass = new MyClass();



    $(TheClass).on('eventCustom', function() {

        alert('Event!');

    });



    TheClass.say();

This doesn't launch warnings or errors, but the events listener is not working (or event is not dispatched). I think the jQuery event system doesn't work with not DOM object, correct?

Any other way (I need events, not callbacks for my specific case) to launch the events?

Thanks a lot!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

answered 11 Years ago benitoh · Accepted Answer

Your understanding of how javascript works is limited since you are approaching it from a traditional OOP point of view. Take a look at this fiddle http://jsfiddle.net/9pCmh/ & you will see that you can actually pass functions as variables to other functions. There are no classes in javascript, only functions which can be closures which can be made to emulate traditional classes:

var MyClass = (function(){



    var static_var = 1;



    var MyClass = function ( callback ) {



        var privateVar;

        var privateFn = function(){ alert('Im private!'); };



        this.someProperty = 5;

        this.someFunction = function () {

            alert('Im public!');

        };

        this.say = function() {

            alert('Num ' + this.someProperty);

            callback();

        }

        this.alter = function() {

            this.someProperty ++;

        }

    };



    return MyClass;



})();



TheClass = new MyClass(function() {

    alert('Event!');

});



TheClass.say();

Alternatively you could create a function in your class to configure the callback/trigger instead of passing it into the constructor.

Have a look at this as a start for your further reading on this concept... How do JavaScript closures work?

Edit

To appease those critics looking for an eventQueue here is an updated jsfiddle :)

http://jsfiddle.net/Qxtnd/9/

var events = new function() {

  var _triggers = {};



  this.on = function(event,callback) {

      if(!_triggers[event])

          _triggers[event] = [];

      _triggers[event].push( callback );

    }



  this.triggerHandler = function(event,params) {

      if( _triggers[event] ) {

          for( i in _triggers[event] )

              _triggers[event][i](params);

      }

  }

};



var MyClass = (function(){



      var MyClass = function () {



          this.say = function() {

              alert('Num ' + this.someProperty);

              events.triggerHandler('eventCustom');

          }

      };



      return MyClass;



  })();



  TheClass = new MyClass();



  events.on('eventCustom', function() {

      alert('Event!');

  });

  events.on('eventCustom', function() {

      alert('Another Event!');

  });



  TheClass.say();