Template empty initially but renders properly on changing and coming back to route

Question

I have a template named profile which contains three other templates. One of these templates is {{> postlist}}

and the helper function for this template is

Template.postlist.helpers({
posts: function() {
return Posts.find({rph: {$in : postsArr}});
}
});

The problem is on going to the route, postlist template is empty, since postsArr is calculated later after the dom has loaded on the basis of other two templates. But, if I click on other route and come back to this route, the template renders properly.

What should I do that template renders properly initially itself?

Answer 1

The easiest way would be to us Session, though it's probably the worst option:

Template.postlist.helpers({
  posts: function() {
    return Posts.find({rph: {$in : Session.get('postsArr') }});
  }
});

If you now call Session.set('postArr', ...) anywhere in your code the posts helper will update automatically. The second option is to use a shared reactive variable:

var postsArr = new ReactiveVar();

and then inside your helper:

return Posts.find({rph: {$in : posts.Arr.get() }});

Now you can do postsArr.set(...) and everything should work fine. Just remember to meteor add reactive-var do your project.

One last doubt is: where to put that reactive variable declaration? In most cases you can do away with putting in a single "controller" file. It will work as long as: - you only have one instance of your template a time - the code which sets ad gets the value of you reactive variable may be put in the same file

If one of the above conditions does not hold, then the only option to go, which is BTW the best possible, is to put your state variable in your template's scope. This is how you do it:

Template.postsList.created = function () {
  this.postsArr = new ReactiveVar();
};

Template.postlist.helpers({
  posts: function() {
    return Posts.find({rph: {$in : Template.instance().postsArr.get() }});
  }
});

From helpers you can always access postsArr using the Template.instance() routine which always return the current template instance, for which the helper was called. From event handlers, note that the second argument of your handler is always the template instance, which you're interested in.

If you need to access it from another templates, then you should probably put your state variable on the corresponding route controller. Assuming you're using iron-router, that would be:

Iron.controller().state.get('postsArr');

The Iron.controller routine grants you access to the current route controller. Read this for more details.