FREELessons: 12Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Defining and Using View Helpers

The vision plugin also provides built-in view helper support. Once again, we'll configure vision to use this feature and write a simple helper for greeting users to our application.

2.4 Defining and Using View Helpers

Traditionally our views are primarily for displaying content, and we want to keep as much logic out of our views as possible. Now there are times when we just have to have some logic. We might need to conditionally show or hide content based upon whether a user is logged in or not. Or if we need to display a list of things, then of course we are going to do so with a loop. However, there are other times when logic really isn't appropriate to use inside of a view. For example, we are going to display a message in the top right hand corner that tells the user good morning, good afternoon, or good evening based upon, of course, the time. And the logic to do something like that, really isn't something that we want inside of our view. Instead, it would be nice to put that logic inside of something else that would help us to get the appropriate message. And then we can just display the message and put whatever markup that we need to here inside of our view. So that's where vision's helpers come into play. They help us do things within our view that we wouldn't necessarily want to do directly within our view. So let's start with our markup. We're going to have another unordered list, and let's give this a class of navbar-nav. And nr-sn2 so we're going to have a right margin, and let's also have the text as light, because we have a dark background for our header. And this is going to have an li element, and we'll give it a class of nav-item, and then we will have our greeting text. So let's go ahead and have Greeting Text here, and then we will replace it with the result of our helper. So there we go, we at least have some placeholder stuff there. So just like with our layouts and our partials, we need to tell Vision where are helpers are going to reside. So once again, we need to go to our server.js. And we need to modify our view configuration. All we need to do is add a helpersPath property, and once again we're going to use source views helpers. And then we need to create that folder. So let's go to our views, and we will create a new folder called helpers, and let's call this day greeting. So we'll create a new file day-greeting and this is going to be, of course, a JavaScript file. Now, a helper is nothing more than a module. So we are going to export a function that is going to have the logic to determine what message we're going to display. So let's go ahead and get the time. We will create a new Date object. And we will get the hours because that's all that we need in order to determine whether or not it's morning, afternoon or evening. And we will check to see if time is less than 2. If it is, then it is Good morning. And then, if it's not less than 12, then we will have another check. If it is less than 17, which is 5 o'clock, which I think after 5, it's evening. So, if it is before 5 o'clock, then we will say Good afternoon. And then we will just have a return statement that says good evening, because if it is greater than 17, then we are in the evening at least by my standards. So this is our helper. It's nothing more than a normal node module. So we are done with that, and all we have to do then is inside of our view we will use a pair of curly braces, and then the name of our helper, which is day-greeting. So now, we can go to the browser, we will refresh the page and we can see that it is good evening. Now, of course, if we wanted to test this with some other values, we could, of course, change our clock. But we definitely don't want to do that. At least, I don't want to do that. So instead let's see. It is 11 PM, so 8 hours ago it would have been 3 in the afternoon. So let's just have an off set of 8, and let's refresh the page, we should see Good afternoon, we do. And if we have an offset of 12 then we would see a Good morning there. And so there we go, we have a helper. It allows us to extract some more complex logic so that it doesn't directly reside within the view. And that keeps our views much easier to read and maintain.

Back to the top