[SOLVED] If there is any good tutorial for understanding "this"

SOLUTION: If you think that “this” of JavaScript is the same as “this” of other programming language (Even if they sometimes act the same), I recommend reading as much as you can http://bit.ly/1nNdk8h.


Hi,

I’m reading this tutorial and I found him use “this” in this code:

Template.yakPage.helpers({
  comments: function() {
    return Comments.find({postId:this._id});
  }
});

Anyway if anyone has a good tutorial or link (Free) to understand it, I’ll appreciate that.

Do you mean generally the use of the this keyword in JavaScript or the particular context of this when used in a template helper?

1 Like

The this keyword refers to the current object that is in scope. If you open the chrome developer tools en type in this in the console you get global object which is the window object.

The this keyword can be used anywhere in your code and can refer to local or global objects depending on the scope of your code.

An article that maybe helpful is:
http://www.quirksmode.org/js/this.html

This is exactly right.

To add, javascript has some funky scope stuff so understanding this is pretty important. To make sure that you don’t lose scope it’s not uncommon to find javascript that sets var self = this;

The particular context of this when used in a template helper?

I know its meaning in JavaScript, but I’m little confused in Meteor.

In a template helper, this points to the helper local context. It is a fuzzy concept, that will hopefully been replaced/improved in future versions of Meteor. To understand it, play with the following code:

Template.myTemplate.helpers({
  myHelper: function() {
    console.log(this);
  },
  getArray: function() {
    return [0, 1, 2, 3, 4, 5];
  }
});
<body>
  {{> myTemplate i=33}}
</body>

<template name="myTemplate">
  <p>{{i}}</p>
  {{myHelper}}
</template>
<body>
  {{> myTemplate i=33}}
</body>

<template name="myTemplate">
  <p>{{i}}</p>
  {{#with j=44}}
    {{myHelper}}
  {{/with}}
</template>
<body>
  {{> myTemplate}}
</body>

<template name="myTemplate">
  {{#each getArray}}
    {{myHelper}}
  {{/each}}
</template>
<body>
  {{> myTemplate}}
</body>

<template name="myTemplate">
  {{#each getArray}}
    {{#with n=this}}
      {{myHelper}}
    {{/with}}
  {{/each}}
</template>

etc.

1 Like

Thank you very much, I didn’t understand “this” of JavaScript right.
Really, things are different now, some friend told me that

this._id comes from router’s data function:

data: function() {
return Yaks.findOne(this.params._id);
}

this data function creates data context for template yakPage.

Now I understand how data is going to be the context of the template, so that it will be the reference of ‘this’ of the helpers.

And the others, thank you for your help.
:blush:

It’s really awesome to see the “this” keyword appreciated! It’s a great feature.

I like to think of it as an implementation of public scope, since it’s a bound context that can be referenced outside a function, as opposed to private scope, which consists of the standard variables and arguments.