Question

What i’m trying to do is a combination of a mootools class and raphael. The problem i got is mainly mootools event binding i guess.
I’m trying to append an event to a raphael element (dom node) and when firing the event another class method should be called.
This is no problem when coding without a mootools class. But this (the right) way i have some problems. When binding the events, the raphael element cannot be longer used because “this” now refers to the mootools class.

Please take a look at this code and i guess you will understand what my problem is:

    // mootools class 
    var test = new Class({

    ...

        initPlane: function() {

            // just an JSON object array
            this.objects = [{"pid":"2","sx":"685","sy":"498","dx":"190","dy":"540"},{"pid":"3","sx":"156","sy":"341","dx":"691","dy":"500"}]; 

            // place the objects on stage and append some events to them
            this.objects.each(function(item, idx){                      
                item.gfx = this.gfx.image("assets/img/enemy.png", item.sx, item.sy, 32, 32);


                // #### differnt approaches to bind the events. all not working

                // first attempt with mootools event
                item.gfx.node.addEvent('click', function(e) {
                    console.log(this.attr('x'));    // not working because this is bound to the class i guess
                    this.info();
                }.bind(this));          

                // second attempt with mootools event
                item.gfx.node.addEvent('click', function(e) {
                    console.log(this.attr('x'));    // not working
                    parent.info(this);              // no binding and not working
                });         

                // first attempt with raphael event
                item.gfx.click( function(e) {
                    console.log(this.attr('x'));    // works !
                    this.info(this);                // not working because this refers to raphael element. 
                });         



            }.bind(this))

        },


        // this method should be called after click event and output element attribs
        info: function(event) {
            console.log(event.attr('x'));
        },      

    ...

    });

Answer 1

your .each is wrong.

Object.each(obj, function(el, key, obj) {

}, bind);

http://mootools.net/docs/core/Types/Object#Object:Object-each

although you actually have this.objects as array, did not notice 🙂

Array.each(function(el, index) {

}, bind);

when you need this to be bound to element on click, that’s fine. just store a copy of this into self and call self.info() instead. alternatively, keep the bind and reference e.target as the trigger element instead, whilst this is your instance

although it may seem ‘neater’ to try to keep this bound to the class wherever possible, mootools-core devs tend to prefer the var self = this; way as it avoids the extra callback to bind etc (look at the mootools source, very common)

also, say you want to have the click event go to a method directly:

element.addEvent("click", this.info.bind(this));

which will send the event as the 1st argument to info (so reference event.target).