Great Responses and references thanks guys.
I just wanted to clear up the sample Aaron provides for a sample 'faq'
class he writes on http://jqueryvsmootools.com (search for the string
"Now that you have an overview of how classes work in MooTools" the
sample is just below it)
Pretty much exactly the same code he writes in his class:
this.terms.each(function(term, index) {
term.addEvent('click', function(){
this.toggle(index);
}, this);//here he does not use .bind(this) why is that?
}, this);
//An extract from my class that is now working thanks to you guys:
this.inputs.each(function(input, index) {
input.addEvent('focus', function() {
this.toggleHint(index);
}.bind(this));//here we are using .bind(this)...
input.addEvent('blur', function() {
this.toggleHint(index);
}.bind(this));//here we are using .bind(this)...
}, this);
On Feb 23, 10:40 pm, Ryan Florence <[email protected]> wrote:
> I've got a few articles that might help:
>
> http://ryanflorence.com/mootools-class/http://ryanflorence.com/mootools-for-beginners-part-6-coding-an-anima...http://ryanflorence.com/mootools-for-beginners-part-7-creating-flexib...
>
> On Feb 23, 2011, at 12:21 PM, אריה גלזר wrote:
>
> > and to add another clarification as to why bind is needed here:
> > foo = {
> > func : function(){console.log(this)}
> > }
>
> > foo.func(); //foo
>
> > setTimeout(foo.func,10); //window
>
> > why? because once we pass a reference of a function to another function,
> > that reference will always be independent of any object it might of resided
> > in. This is the same with addEvent. So when we want to make sure a function
> > still reference a parent object when we pass it, we use bind:
>
> > setTimeout(foo.func.bind(foo),10);//foo
>
> > The best place for you to read about 'this' is here:
> >http://dmitrysoshnikov.com/ecmascript/chapter-3-this/
>
> > it's quite long, but very thorough. I can't think of any better place that
> > you can learn about js mechanics than this blog (while you're at it - that
> > entire series is a must - look at the menu for more articles)
>
> > On Wed, Feb 23, 2011 at 8:15 PM, Aaron Newton <[email protected]> wrote:
> > One last bit here on terminology. "this" has nothing to do with scope. This
> > is scope:
>
> > var foo = function(){
> > var bar = 0;
> > };
> > //bar is not available here because it is not in scope
>
> > "this" is actually pretty easily defined: "this" is the object to which the
> > current function belongs. Its how objects with methods can refer to
> > themselves (how else could they?). When a function is defined on its own,
> > its owner is the window:
>
> > (function(){ console.log(this) })();
> > //logs the window
>
> > Even if that function is inside another function or method this is the case:
>
> > var foo = {
> > bar: function(){
> > console.log(this); //logs foo
> > (function(){ console.log(this) })(); //logs window
> > }
> > };
>
> > We bind things so that we can use functions as arguments within an instance
> > and still reference that instance:
>
> > var foo = {
> > bar: function(){
> > (function(){ console.log(this) }).apply(this); //logs foo
> > }
> > };
>
> > On Wed, Feb 23, 2011 at 9:04 AM, Sean McArthur <[email protected]>
> > wrote:
> > It looks you were trying to pass scope to addEvent using a third argument,
> > but it does not work that way. As Piotr showed, you need to bind the
> > function.
>
> > On Wed, Feb 23, 2011 at 8:41 AM, Piotr Zalewa <[email protected]> wrote:
> >http://jsfiddle.net/zalun/GwxvG/2/
>
> > bind changes the scope, so this refers to the object and not to clicked
> > element.
> > If you're confused about what is "this" in a function simply
> > console.log(this) as a first thing in this function will give you a hint.
>
> > zalun
>
> > On 02/23/11 16:29, roark wrote:
> > > Hi Everyone.
>
> > > I've had a good read through the article Aaron wrote
> > > athttp://jqueryvsmootools.com
> > > and I'm really battling to understand scope or when to use "this" in
> > > my classes etc.
>
> > > I'm writing a class that will display a help context when you focus on
> > > a filed in a form.
> > >http://jsfiddle.net/roark/GwxvG/1/
>
> > > When I click on a filed, i get "this.function_name" is not defined.
> > > Trying to search google for the term 'mootools "this" ' is not very
> > > successful as you can image so i was hoping soemone could have a look
> > > and let me know where I'm going wrong?
>
> > > Thanks
> > > Roark
>
> > --
> > blog http://piotr.zalewa.info
> > jobs http://webdev.zalewa.info
> > twit http://twitter.com/zalun
> > face http://facebook.com/zaloon
>
> > --
> > Arieh Glazer
> > אריה גלזר
> > 052-5348-561
> >http://www.arieh.co.il
> >http://www.link-wd.co.il
