Ok, i think he's talking about the bind function, it would get the current 'this' (someway) and pass as a parameter of the created function, while binding the passed parameter to the function.
But theres a pointe here too. Ecmascript will have the bind function natively, so i think is better to implement it the way its defined there. Fábio Miranda Costa Engenheiro de Computação http://meiocodigo.com On Wed, Jul 8, 2009 at 2:34 PM, anutron <[email protected]> wrote: > 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) < > ml-user%2b166768-1110295...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3226898&i=0> > > 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 >> > >> > > The MooTools Tutorial: www.mootorial.com Clientcide: www.clientcide.com > > ------------------------------ > View this message in context: Re: [Moo] Re: Bind issue with > class<http://n2.nabble.com/-Moo--Bind-issue-with-class-tp3217098p3226898.html> > Sent from the MooTools Users mailing list > archive<http://n2.nabble.com/MooTools-Users-f660466.html>at Nabble.com. >
