Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.5 hours
Get started with hapijs 400x277
  • Overview
  • Transcript

2.3 Using Partial Views

In addition to layouts, vision provides built-in support for partial views. In this lesson, we'll configure vision to use partial views and write a partial view.

2.3 Using Partial Views

In the previous lesson, we looked at Vision's layout feature and we created a layout page so that our views will use that layout page and give us a consistent look and feel between our current two views. Now, of course, we are going to be adding more pages as this course goes on, but for right now that's great. Now in this lesson, we are going to look at what are called partials. These are smaller views and really you can think of them as HTML components. We define a partial view so that we can reuse it In whatever view that we need to use it in. Like for example, inside of our index, and our contact views we have a title. They both have an H1 element. So let's say that, okay, later on down the road we decided that we wanted to change this h1 to an h2. Now in this case, it's not that big of a deal because we can just go to these two views and change the mark up. However, let's also assume that this application is huge. And on many of those views, we have done the same thing where we have an h1 element with our title. And we want to make the same change throughout those. So this would be a good place to use a partial view. Because it's the same mark up that we are reusing throughout all of our different views. And by defining a partial, then that gives us just one place that we need to go in order to make any necessary changes. So the first thing that we need to do is change our view configuration. In the previous lesson, after we set layout to true, we had to tell vision where our layout pages reside. Well, we have to do the same thing with our partials. We don't have to turn on a partials feature. But we do have to say where our partials are going to be. And in this case, we will once again stick them inside of the views folder. And let's create a partials folder inside of there. So our views folder continues to get a little larger. And inside of here there's no default name that we need to define for our partials because these are, as I've mentioned, just reusable chunks of HTML. So in our case, what we really have is a page title. So we can create a new file inside of our partials folder and we can call it page title.html, or we could call it something else. I like page title because that's very indicative as to what it is. And all we would need to do then is put in this HTML so that we have our h1 element and then our page title. But now we need to tell our index views and our contact view that we want to use this partial. So in this case, what we will do is have two sets of curly braces, a greater than sign, and then the name of our partial, page title. And we will do the same thing inside of index so that now whenever we go to the browser let's refresh the page we have the same functionality. And if we make a change then to the heading element, instead of h1 we're gonna go with h2. We're going to see that that change is made for both of our views. Our Index shrunk. And if we go to Contact, we can see that that is a smaller text as well. And that's it. Partials are very, very simple. The only thing that we absolutely need to do is tell Vision where our partials reside, then of course create and use our partials.

Back to the top