Meteor: what is "data context"?

Just starting with Meteor, and going through the Meteor Tutorial by Matthew Platts.

In this tutorial, as well as in the official Meteor Documentation, there are many references to the concept of data context, but I can't seem to find a cristal clear definition / explanation (with examples) of what this is.

For instance, in the 2.4.3 Rendering Data with Helpers section, we read:

Notice that inside of the #each block we go {{name}}, even though we have no name helper defined. This is because the data context changes inside the #each block. We loop through each item in the teams array, and since each item has a “name” attribute Meteor will automatically create a {{ name }} helper.

UPDATE: Actually, just reading through the end of this very section, the author recommends a resource that makes things pretty clear: A Guide to Meteor Templates & Data Contexts. Still no accurate definition though.

So, in Meteor, what is data context exactly?

Solution

I'll try to explain as much as I know, correct me if I'm wrong.

I'll explain using following snippet:

<template name="posts">
  {{#each posts}}
    <p>{{name}}</p>
  {{/each}}
</template>

Let's assume it will display all the posts names from a blog:

First Post
Second post
Third post
..........
..........

I assume you know the concept of helpers and events.

In the above snippet, in general for {{name}}, meteor searches for the helper called name in helpers:

Template.posts.helpers({
  name: function(){
   return "dummy text";
  }
});

If it finds any, it runs that helpers and displays the value.

So here, it outputs:

dummy text
dummy text
dummy text
...........

But if it doesn't find any helpers, it will search in data context.

Let's assume for posts we're returning some data:

   Template.posts.helpers({
      posts: function(){
       return Posts.find().fetch();
      }
    });

The data we're sending to posts helper looks like this:

{name: "First post", _id: "xxx", ......},
{name: "Second post", _id: "yyy", ......}
{name: "Third post", _id: "zzz", ......}
.................

In the code for {{#each posts}}, it loops through every object and displays name property("First Post","Second Post,"Third Post").

It displays name property because it doesn't find any helper for name, and then it searches in the current data context and found property with the same name name and displays that.

Data context in helpers and events

Let's take the same snippet and add a delete button:

<template name="posts">
      {{#each posts}}
        <p>{{name}}</p>
       <button>Delete Post</button>
      {{/each}}
    </template>

It displays like below:

First Post <Delete Post>
Second post <Delete Post>
Third post <Delete Post>
..........
..........

In the events:

Template.posts.events({
  'click button': function(){
     console.log(this)
    Posts.remove({_id: this._id });
  }
})

Here, when you click on any delete button, it will delete respective post.

Here we're using this._id: this means data context.

this will give you the data that the helper takes as input to display.

For example, if you click on the delete button beside First Post, then in the events it will give you following data as this:

{name: "First post", _id: "xxx", ......},

because that is the data context available when it displays that content.

Same if you click on the button beside second post:

{name: "Second post", _id: "yyy", ......},

And same goes with the helpers too.

I hope this helps at least someone out there.