I agree 100% that having "this" always point to the instance is the best
practice. It's unambiguous and will prevent you from breaking things later.
As for your example, there are several ways you could solve this problem.
The big issue here is that you are using a shortcut, and that shortcut has
limitations. You are calling addEvent on a collection, an array of elements.
This is why you do not have a pointer. If you need the pointer, you need to
do the iteration yourself (the iteration which the shortcut is doing for
you):
this.element.getElements('a').each(function(a) {
a.addEvent('click', function(event) {
// do something with the anchor clicked
this.doSomething(a);
}.bind(this));
}, this);
Your problem is that the shortcut isn't more powerful, but that is the
nature of shortcuts. They are trade-offs - they can be easy or robust, but
rarely both.
On Wed, Jul 8, 2009 at 1:36 PM, Eneko Alonso (via Nabble) <
[email protected]<ml-user%[email protected]>
> wrote:
>
> 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<eneko.alo...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3227864&i=0>>
> 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<aa...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3227864&i=1>>
> 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.
> >>
> >
>
>
> ------------------------------
> View message @
> http://n2.nabble.com/-Moo--Bind-issue-with-class-tp3217098p3227864.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-tp3217098p3227917.html
Sent from the MooTools Users mailing list archive at Nabble.com.
