We are probably not going to modify addEvent (I can say that it's a 99%
probability against).
A better practice if you need to reference the element is to simply name it:
var div = new Element('div', {
id: 'test',
styles: {
border: '1px solid blue',
width: 100, height: 100
},
events: {
click: function(){
alert('clicked! ' + div.get('id'));
}
}
}).inject(document.body);
run that in firebug and click the blue box. Works fine. You can refer to the
element's properties and bind "this" to whatever you like.
As for
var that = this;
to keep a reference to the class around, it's generally considered a poor
practice, partly because it's unnecessary and partly because it creates the
potential for circular references (though these are negated by MooTools'
garbage collection practices).
-aaron
On Wed, Jul 8, 2009 at 10:22 AM, Eneko Alonso (via Nabble) <
[email protected]<ml-user%[email protected]>
> wrote:
>
> Hi Fabio,
>
> I usually do the same this, assign this to a local variable so I can
> use it into functions without binding.
> But I think it's kind of ugly or bad practice. To me, bind(this) looks
> cleaner.
>
> The problem with events is that if we use bind(this) we loose the
> pointer to the element. Sometimes I use event.target, but this can
> point to a different element if the element with the event has child
> elements.
>
> So here is my proposal. Is it possible to modify Mootools so a second
> parameter is passed to the callback function?
>
> element.addEvent(function(event, item) {
> // This points to the class
> // item points to element
> }.bind(this));
>
> That would be awesome.
>
> Essentially is the same thins the each function does, right? Without
> binding, this points to the element, but the element is passed as an
> argument too, which is very handy.
>
> Let me know what you guys think :)
>
>
> 2009/7/7 Fábio M. Costa
> <fabiomco...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3226818&i=0>>:
>
> > what i usually do is savethis to a local var.
> >
> >
> >
> > addControl: function(pCntrlType) {
> > var obj;
> > var self = this;
> >
> > switch (pCntrlType) {
> > case "TXTB":
> > obj = new Element('input', {
> > 'id': 'textbox1',
> > 'styles': {
> > position: 'absolute'
> > },
> > 'events': { 'click': function() {
> > grabControl(self);
> > }
> > }
> > }).inject($('
> > tdMainCenterRight'));
> > break;
> > }
> >
> > this.makeElementDragable(obj);
> > },
> >
> >
> >
> >
> >
> >
> > Fábio Miranda Costa
> > Engenheiro de Computação
> > http://meiocodigo.com
> >
> >
> > On Tue, Jul 7, 2009 at 8:58 AM, Gafa
> > <sfreder...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3226818&i=1>>
> wrote:
> >>
> >> Yes and No as it then changes the "this" being passed to grabControl
> >> (this) <- "this" parameter should refer to the newly created textbox
> >> object and doesn't.
> >>
> >> any other suggestions?
> >>
> >> thanks
> >>
> >> On Jul 6, 7:37 pm, Fábio M. Costa
> >> <fabiomco...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3226818&i=2>>
> wrote:
> >> > 'events': { 'click': function() {
> >> > grabControl(this);
> >> > }.bind(this)
> >> > }
> >> >
> >> > this doesnt work?
> >> >
> >> > Fábio Miranda Costa
> >> > Engenheiro de Computaçãohttp://meiocodigo.com
> >> >
> >> > On Mon, Jul 6, 2009 at 6:12 PM, Gafa
> >> > <sfreder...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3226818&i=3>>
> wrote:
> >> >
> >> > > var test= new Class({
> >> > > Implements: Options,
> >> >
> >> > > options: {
> >> > > myOp: "DDD
> >> > > },
> >> > > initialize: function(options) {
> >> > > this.setOptions(options);
> >> > > },
> >> > > addControl: function(pCntrlType) {
> >> > > var obj
> >> >
> >> > > switch (pCntrlType) {
> >> > > case "TXTB":
> >> > > obj = new Element('input', {
> >> > > 'id': 'textbox1',
> >> > > 'styles': {
> >> > > position: 'absolute'
> >> > > },
> >> > > 'events': { 'click': function() {
> >> > > grabControl(this);
> >> > > }
> >> > > }
> >> > > }).inject($('tdMainCenterRight'));
> >> > > break;
> >> > > }
> >> >
> >> > > this.makeElementDragable(obj);
> >> > > },
> >> > > grabControl: function(pEl) {
> >> > > //this.updateControlPosition(pEl);
> >> >
> >> > > //set class varial to seleted control
> >> >
> >> > > },
> >> > > makeElementDragable: function(pObj) {
> >> >
> >> > > new Drag.Move(pObj, {
> >> > > container: $('tdMainCenterRight'),
> >> > > droppables: '#tdMainCenterRight',
> >> > > precalculate: 'true',
> >> >
> >> > > onDrag: function(el, event) {
> >> > > //this.updateControlPosition(el);
> >> > > } .bind(this)
> >> > > });
> >> > > }
> >> > > });
> >> >
> >> > > Problem is when I use this class and the grabControl function is
> >> > > called from within the click event, it errors, I know I need to bind
>
> >> > > the grabControl function from the class to the click event but I
> can't
> >> > > figure it out.
> >> >
> >> > > Thanks
> >
>
>
> ------------------------------
> View message @
> http://n2.nabble.com/-Moo--Bind-issue-with-class-tp3217098p3226818.html
> To start a new topic under MooTools Users, email
> [email protected]<ml-node%[email protected]>
> To unsubscribe from MooTools Users, click here< (link removed) >.
>
>
>
-----
The MooTools Tutorial: http://www.mootorial.com www.mootorial.com
Clientcide: http://www.clientcide.com www.clientcide.com
--
View this message in context:
http://n2.nabble.com/-Moo--Bind-issue-with-class-tp3217098p3226898.html
Sent from the MooTools Users mailing list archive at Nabble.com.
