This course will be retired on July 21, 2017.
Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Child Views4:50 with Guil Hernandez
Child views are separate views you load inside parent templates. Now that you understand how views and dynamic routing work in Foundation for Apps, you're going to learn how to create and load a child view.
When creating a child view, you define the parent template name in the front matter. For example:
--- name: featured url: /featured parent: home ---
This link will load the new child view when a user clicks on it:
<a ui-sref="featured">View the latest featured trails!</a>
The child view will load in a
You can also define the parent in the name variable like this:
--- name: home.featured url: /featured parent: home ---
Then, in the
ui-sref directive, add the parent view name in the value:
<a ui-sref="home.featured">View the latest featured trails!</a>
Now that you understand how views and dynamic routing work, in foundation for
apps, I'm going to show you how to create and load a child view.
Child views are separate views you can load inside parent templates.
So in the templates directory About, add-trails, contact, and
home are all parent templates.
So you can create child views that load inside them.
Child views help keep your code modular and easier to maintain,
because you can break parts of the view out into smaller chunks of code.
I'll show you an example.
You create child views inside the templates folder.
So in the templates directory I'm going to create
a new HTML file and name it featured.html.
I'm going to use this child view to load featured hiking trails
inside the home view.
So first I'm going to add the required front matter variables up top.
So I'll create a front matter block with two dashed lines.
And then I'll add a name variable and set the value to featured.
And I'll add the required URL variable and set the value to forward slash, featured.
When creating a child view, you need to define the parent template name in
the front matter, so right below the URL variable, I'm going to create a new
variable of parent and since this is going to load inside the home view.
I'm gonna set the parent value to home.
Next, I'll quickly add some content, so we're able to see it load.
So I'll add an h2 element and let's write some content.
So I'll say these are the featured trails.
Later, we're going to define a few featured trails in this child view,
using grid layout.
Right now, I'm just showing you an example of how you can create and
load a child view inside a parent view to reveal new sections of content to users.
Now since I created a new template file, I need to stop the watch task.
So back in my terminal, I'll hit Ctrl+C to stop the watcher and server.
Then I'm once again going to run the command foundation apps watch
to rebuild the app.
Next I'm going to open up my home.html template, and I'm going to
create a link that will load the new child view when a user clicks on it.
So right below the paragraph, I'll add an anchor element
that says view the latest featured trails.
And then I'm going to replace this href attribute with the ui-sref Directive.
And as the ui-sref value I want to define the name of the child view I just created.
So I'm going to set the value to featured.
So now i'll create a container to load the child view
when this featured link is clinked.
So right below the anchor element, I'll add a comment that says, featured
trails view, just to notify me that this is where the child view is going to load.
So below that, I'm going to create a div element.
And in the opening div tag, I'll add the ui view directive.
Now as you learned earlier,
the ui view directive creates a special container that loads views.
So back in the browser I'll click over to
the home view ,and there we see the new featured trails link.
So when I click the featured trail link,
it loads the child view inside that ui view container, and
in the url, we can see that it loaded the featured child view, me.
In the child view's front matter block, you can also define the parent in the name
variable like this, so right before the value featured I'm going to type home dot.
So here home is the parent, and then I can go ahead and delete the parent variable.
So now in the UI's sref directive I need to add the parent view name and
the value here, so before featured I'm going to type home dot.
And when we take a look at it again, as you can see it works
exactly the same way it did before I changed the front matter variables.
So we've covered a lot in this stage.
But we're just getting started.
Coming up in the next stage, we'll begin building the Trekker app prototype
using Foundation for Apps' flex box grid and UI components.
You need to sign up for Treehouse in order to download course files.Sign up