Context inside templates with Iron-Router

meteor, templates

Solution

IronRouter renders your template with the result of RouteController.data as the current data context.

<template name="viewPost">
   <div>
        <h1>{{title}}</h1>
        <p>{{content}}</p>
    </div>
</template>

var PostsController=RouteController.extend({
    template:"viewPost",
    waitOn:function(){
        return Meteor.subscribe("postsById",this.params._id);
    },
    data:function(){
        return Posts.findOne(this.params._id);
    }
});

this.route("viewPost",{
    path:"/posts/:_id",
    controller:PostsController
});

In this example, IronRouter will render the "viewPost" template with the post having this.params._id as data context.

What is the standard way of giving a template a context in the first place ?

There is 2 ways :

{{#with myContext}}
    {{> myTemplate}}
{{/with}}

{{> myTemplate myContext}}

As you can see, the #with control structure sets the current data context. The #each structure iterates over a Cursor (or an Array) and sets the current data context to the current fetched document (or the current cell).

<template name="postsList">
    {{#each posts}}
        <h1>{{title}}</h1>
    {{/each}}
</template>

Template.postsList.helpers({
    posts:function(){
        // cursor
        return Posts.find();
        // array
        return [{title:"Title 1"},{title:"Title 2"},{title:"Title 3"}];
    }
});

UPDATE : Could you possibly add a note about inheritance ? For instance, if I have nested #each blocks, do variables cascade ?

I came up with this example :

<template name="parent">
    <ul>
        {{#each parentContexts}}
            {{> child}}
        {{/each}}
    </ul>
</template>

<template name="child">
    <li>
        <ul>
            {{#each childContexts}}
                {{> content}}
                <p>../this.parentProperty = {{../this.parentProperty}}</p>
            {{/each}}
        </ul>
    </li>
</template>

<template name="content">
    <li>
        <p>this.childProperty = {{this.childProperty}}</p>
        <p>this.parentProperty = {{this.parentProperty}}</p>
    </li>
</template>

Template.parent.helpers({
    parentContexts:function(){
        return [{
            parentProperty:"parent 1"
        },{
            parentProperty:"parent 2"
        }];
    }
});

Template.child.helpers({
    childContexts:function(){
        return [{
            childProperty:"child 1"
        },{
            childProperty:"child 2"
        }];
    }
});

If you run this example, you'll notice that you can't access the parentProperty in "content" because the default #each helper OVERRIDES the parent data context with the new context provided.

You can access the parentProperty in the nested #each block using this syntax : ../this.parentProperty, which is reminiscent of the UNIX parent directory access syntax.

However you cannot use this syntax in the "content" template, because it is agnostic of the nested each structures it was called from : you can only use the ../../parent syntax in a template where the actual nesting happens.

If we want to access the parentPropery in the content template, we must augment the current data context with the parent context.

To do so, we can register a new #eachWithParent helper like this :

Handlebars.registerHelper("eachWithParent",function(context,options){
    var parentContext=this;
    var contents="";
    _.each(context,function(item){
        var augmentedContext=_.extend(item,parentContext);
        contents+=options.fn(augmentedContext);
    });
    return contents;
});

Now if you replace the nested #each with this new helper, you will have access to parentProperty in "content".

Problem

Original source