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)
<[email protected]<ml-user%[email protected]>
>
> 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...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3227071&i=0>
> > 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...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3227071&i=1>
>> >:
>> > 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...@...<http://n2.nabble.com/user/SendEmail.jtp?type=node&node=3227071&i=2>>
>> 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.
>> >
>> >
>>
>
>
>
> ------------------------------
> View message @
> http://n2.nabble.com/-Moo--Bind-issue-with-class-tp3217098p3227071.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-tp3217098p3227246.html
Sent from the MooTools Users mailing list archive at Nabble.com.
