In other words, when write OO code, I like 'this' to point to the class instance always :) If 'this' points to something else, I think it is not good coding.
Having this pointing to my class instance in all cases makes my code easier to read and maintain. Does that make sense? On Wed, Jul 8, 2009 at 1:31 PM, Eneko Alonso<[email protected]> wrote: > Oh, you are right on that. Sorry my example was not well tought. > > Either way, think that this.element could have more than one dom > element (new myClass({container: $$('any selector')}). If that is the > case, I wont have a pointer to the element clicked. > > Another example. Imagine I want to do something will all A tags inside > my container: > > this.element.getElements('a').addEvent('click', function(event, item) { > // do something with the anchor clicked > this.doSomething(item); > }.bind(this)); > > If we had item, we would have a nice reference to the clicked element. > But since item is not there, do I need a reference to every A tag > inside the container? > > In this case, the only option (bindWithEvent wont work here either) > would be to have the pointer to the class and leave the callback > function unbound: > > var self = this; > this.element.getElements('a').addEvent('click', function(event) { > // do something with the anchor clicked > self.doSomething(this); > }); > > > Again, is not that this problem cannot be solved. It is about how > Mootools could help you solve the problem :) > > Thanks > > On Wed, Jul 8, 2009 at 11:47 AM, anutron<[email protected]> wrote: >> Eneko, you don't need this. Look at your code - you've already got a pointer >> to the item! >> var myClass = new Class({ >> initialize: function(container) { >> this.element = container; >> }, >> methodA: function() { >> this.element.addEvent('click', function(event) { >> this.methodB(this.element); <<<<< You've already got a pointer to the >> element - this.element! >> }.bind(this)); >> }, >> methodB: function(item) { >> // do something with item >> } >> } >> >> new myClass($('container')); >> >> 2009/7/8 Fábio M. Costa (via Nabble) <ml-user%2b98816-1760363...@...> >>> >>> 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 <eneko.alo...@...> 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 <fabiomco...@...>: >>>> > 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 <aa...@...> 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. >>>> > >>>> > >>> >> >> 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. >> >
