I agree with you Eneko. But you have to convince other people for it to be implemented hehe. And theres a problem here because it will be kind of hard (impossible?) to make 2.0 100% compatible with 1.2 with this change.
Fábio Miranda Costa Solucione Sistemas Front-End Engineer http://meiocodigo.com On Wed, Jul 8, 2009 at 2:54 PM, Eneko Alonso <[email protected]> wrote: > > No, I think the addEvent function should pass always the item as a > parameter to the callback function, whenever this is bound or not. > > Examples: > > element.addEvent('click', function(event, item) { > // item points to element. item == this > }); > > var myClass = new Class({ > initialize: function(container) { > this.element = container; > }, > methodA: function() { > this.element.addEvent('click', function(event, ITEM) { > this.methodB(item); > }.bind(this)); > }, > methodB: function(item) { > // do something with item > } > } > > new myClass($('container')); > > I think this code is very clean, since it does not require the use of > any additional variables to store references to the element nor the > class instance it self. But the ITEM paramenter is missing. > > Imagine now that I do: > new myClass($$('div.container')) > > The class will work fine, having multiple containers while methodB > will work only whit the one clicked by the user. > > I would love to have that functionality there :) I know touching the > core of a framework shouldn't be done much, but I think this would be > a great feature. > > > > 2009/7/8 Fábio M. Costa <[email protected]>: > > 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...@...> 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...@...>: > >>> > 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...@...> 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...@...> 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...@...> 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 > >> Sent from the MooTools Users mailing list archive at Nabble.com. > > > > >
