Transcript
  • Meteor

Layouts and Regions

From the class:  Using Iron Router

Yield regions in layouts in the new version of Iron Router have gotten quite a bit better. So in this video, I'd like to show you how to use yield regions. Let's say that when we click on a particular article, I'd like to be able to show some breadcrumbs up here at the top. But this is really something that the layout should define, because the layout will be for the overall application.

But when I go to a particular blog article, I'd like to fill in the breadcrumbs up here with the article title and maybe some other things. So this is a good use of yield regions. Before we get started, let's go back to the main page here.

And I'm going to add the Bootstrap packet so we get a little bit of styling. I'll type meteor add bootstrap. And then we'll hop over to the HTML for the app. And you can see that the application looks a little bit different now that we've added the Bootstrap library with its associated .less files.

OK, next what I want to do is to go into the layout template that we've been using. And I want to add a special yield region to this layout. And that will let me define an area in the layout that I later want to inject some other template into.

So in this case, what I want to do is create a yield region called breadcrumbs. First I'll create the enclosing HTML inside of the layout. And so I'll create an unordered list with a class of breadcrumb that'll tell Bootstrap to style this properly.

And then inside of there, I'm going to create something called a yield region. So I'll use the yield keyword and then give it a name of breadcrumbs. You can see over in the browser that it created this breadcrumb region at the top. And what I want to be able to do is to render some content inside of this, depending upon the article that I've actually clicked on or if I'm on the home page.

So what this yield helper does here is it creates this region here, whereby we can inject templates or content into this area here. And we can change that content dynamically depending upon the actual route that we're on. Now, historically we've done this all in JavaScript. But to start us off, I'm going to show you how to do this directly in our template markup.

What I can do is go inside of the template that's going to be rendered for this route. So in this case, that'll be the blog template. And I can use a new helper called content for. And we're going to use it with block-like expression using this pound symbol.

And then I name the yield region that the content is actually for. So in this case, I'm going to provide some content for the breadcrumbs region. And we'll close it off like this. And now, whatever content I put inside of here will get injected automatically into the breadcrumbs region.

So for example, if I create a list item and we say home and I press Save, the breadcrumb area over on the right will now have this HTML inside. Then I've gone ahead and replaced that home text with a link to the home page. And so when we're on the home page, if we click Home, it'll take us right back to this home page.

So I find that using the content for helper is a lot more convenient than typing this all out in JavaScript and creating new templates for each one of these different regions, which is how we used to do it in the past. Now we can just define it directly in the main template for the page and provide as many content for blocks as we would like. So now let's go over to the blog page and do the same thing for that route.

I've clicked on the first blog article. And so far, you can see the breadcrumbs are empty. So what I'm going to do is copy this piece of code here. And we'll go down to the actual article page, and I'll paste this in and save the document.

And now our article page looks just like the home page, with this home page link here. And one thing to notice is that all of this HTML here automatically goes into a special region called the main region. So if you ever hear that vocabulary, you'll know what it means.

It goes into the main area of the page. And then everything else are called named regions. And the name of this particular region that we're putting this content into is called breadcrumbs.

But notice we don't have to use a content for main here. Just the rest of this HTML automatically goes into that main region. OK. So now what we want to do is to update the breadcrumbs for this page so that it actually has the blog article title after the home.

So we can add another list item inside of our content for block. The data context for the template is still good inside of this block. So I can use this expression to grab the title from the data context. And when I press Save, you'll see the title show up in the breadcrumb area.

And let's do one last thing, which is to create a span. And this will give me a nice Bootstrap-style divider. Great. So now we have breadcrumbs. And the breadcrumb changes depending upon the article that we're actually on.

Now, most of the time, providing content using the content for block helper directly in your templates will be the easiest way to accomplish rendering templates or content into a yield region. But you can also do it programmatically in JavaScript using the render method.

So here we are inside of the blog show route. And what I want to do is call the render method. And as an option, I can provide an option called to and then provide the name of a yield region. So let's say that instead of this, I can render out the article breadcrumbs template and render that into the breadcrumbs yield region.

So if you want to have programmatic access over which templates get rendered into the region, you can do it right in your route function like this. And you can call the render function as many times as you want, rendering different templates into different regions. For example, I might have a footer or any other number of regions.

Now, this layout functionality with yield regions and content for is provided to you automatically in Iron Router. But the project that it's actually implemented in is called Iron Layout, which is a dependency of Iron Router. So if you want to learn more about this specific project, you can go over to GitHub and you can take a look at the project and also the read me, which describes in a little bit more detail what we just talked about. In this video, I showed you how a layout can have different dynamic regions defined by using this yield keyword and how we can render content into those regions using the content for helper or programmatically in JavaScript.