• Meteor

Rendering with Data

From the class:  Using Iron Router

When I click on a particular blog article link and navigate into the page for that blog article, I'd like to show the actual data for this specific article. So, I'd like to set the data context for this page. In the rest of this video, I'm going to show you a couple ways that we can do this.

The standard way to set a data context, if we weren't using the router, is to use the with block expression. So, we'd provide a helper here, like with article, and that would set the data context for everything inside of this block. I've pasted in some HTML. And what we'll do is we'll show the title, the author, and the body for this particular article, and we'll get the data context from this helper that we could define directly on the article template.

This will work fine. But if you're using routing, I find that it's easier to set the global data context for this template inside of our route function itself. To do that, I'll get rid of the with helper, and we'll go over to our JavaScript. And I can provide a set of options to this render method, and I'll provide the options as an object. And one of the options we can provide is called data, and the value will be a function that returns a data context for this template that we're rendering.

And so, just to show you how it works, I could say, return, and then any kind of object. So, we might say the title is sample. And we'll jump over to the browser and make sure this is working.

So, now my global data context for this template is set to this object. And it has a title of sample, an author, and a body. Of course, we don't want this to be hard coded. What we actually want to do is to return the record from the Mongo database. And so, what we can do is to say, return articles. And we'll find the particular article that we're looking for based on the ID that was passed in from the parameters from the dynamic path here.

So, we'll grab the ID parameter. And this will be the actual article that is returned from our Mongo collection. Now, if I go back to the home page and refresh to make sure I've got the latest data, if I click on a particular blog article, I have the actual data context that comes from the record in the Mongo collection.

Now, let me explain something that might be a little confusing, and that is why the data value is a function instead of just a regular object. The reason is because the delta function might have reactive data sources like this article's collection. And so, if the reactive data source changes, we don't want this entire function to rerun. We just want the part that uses the data to rerun. So, this will push down the calling of this function until it's absolutely needed, for example, inside of our template itself. So, that's why the value of data is a function.

Now, so far, we've set the data context on the article itself. And so, this has been rendered into the main region, and we're setting a data context for this template. We can also set this data context on the overall layout, and that will make it available to any of the templates rendered within the layout. And I'll show you more about layouts in another video, but let's go ahead and set this data context on the layout itself.

So, I moved the data option up into the layout, and now my options for rendering the article template are just empty. Because the layout encompasses all of the templates within it, this data context is available to all of the sub-templates, including this article. And so, notice our page is still looking fine, and we're still able to see the blog article title, the author, and the body.

If you've been using the older iron-router, you might be used to using route controllers and setting a data option on the route controller. And what that is doing is simply setting the data option on your layout. And we'll look more at route controllers in another video. But I wanted to make sure that you see that, when we set the data context as an option, we're actually selling it for the overall layout for the page, like we're doing here in our route function.

Right now we're turning one article, but it's also possible that you want to return an object that has multiple properties on it. For example, we might return an object that has an article, just like we have below, and then maybe have some comments for that article as well. So, you can return an object that has multiple properties, and then use those inside of your template.

One thing to keep in mind, if you're going to do this, is that the values of these properties should generally be functions also. And that's so that the reactivity can get pushed down as far as possible, and so that this entire function doesn't rerun if one of these invalidates. And so, instead of doing this, we could set this to a function that returns this value. And that way, the templating system can call this function, and only the inside of this will rerun if the comment changes, or the article changes.

In this video, I showed you a couple of ways to set a data context for our page. One way is to pass the data option as an option to the render method. Another is to set the data option for the overall layout, which can be used or inherited from all the templates within it.