Mootools onClick发送对象

Question

I m trying to send an object to another out of the object it self.

var Tile = new Class({
    initialize : function(){
        this.inner = new Element(...);
        this.inner.addEvent('click', function() {
            popup.open(this);
        });
    }
});

If I m alerting any membervariable from Tile out op Popup it's alerting 'undefined'. What am I doing wrong?

var Popup = new Class({
    initialize : function(){
    },
    open : function(tile) {
        alert(tile.width);
    }
});

Kind regards!

Answer 1

When you pass this to the popup object, you are passing the element itself (which I believe is your intention). However, elements don't by default have a property called width .

Perhaps you are looking for getSize(); ? This returns a two-property object ( x and y ), corresponding respectively to the width and height of the element.

I've approximated your code into the following jsFiddle, give it a try: http://jsfiddle.net/g4SmJ/

For reference, here is the new Popup class code:

var Popup = new Class({
    initialize : function(){
    },
    open : function(tile) {
        size = tile.getSize();
        console.log(size);    // console.log provides a nicer interface for debugging, you can pass objects into it! Use the Chrome Inspector or Firebug to see its output.
        alert(size.x);
    }
});

---

In response to your comment:

Oh ups I did not meant to alert the doms width, sorry for that. What I posted is smaller code from the full object. Width actually was a defined member in Tiles that I wanted to alert out of Popup

In this case, then when you are sending the call to .open(); , you passed this into the function call, but you are not passing the Tile object ! Instead, you passed the inner element you created.

Rewrite Tile thusly:

var Tile = new Class({
    initialize : function(){
        var self = this;
        this.inner = new Element(...);
        this.inner.addEvent('click', function() {
            popup.open(self);
        });
    }
});

Answer 2

I guess you are looking to send the Tile instance. Like the above answer - when you send this inside addEvent method you are sending the element itself that called the event: in your case you are sending instance of inner since you define the onclick on it.

If you want to send the tile instance you have 2 options:

1) bind to to the function this - meaning "connect" the current scope you are in(Tile) into the event:

var Tile = new Class({
    initialize : function(){
        this.inner = new Element(...);
        this.inner.addEvent('click', function() {
            popup.open(this); // <- now this is 'Tile' instance 
        }.bind(this)); //bind this to click
    }
});

2) Save the instance outside the scope of the function and use it inside:

var Tile = new Class({
    initialize : function(){
        this.inner = new Element(...);
        var self = this; //save the this to var 'self'
        this.inner.addEvent('click', function() {
            popup.open(self); //use self which holds the Tile instance
        });
    }
});