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.
>
