Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Injecting Data Into Templates

In this lesson, you will learn how to inject data into your templates in order to make them more flexible and more dynamic.

3.4 Injecting Data Into Templates

Hello and welcome back. All of our changes in the last lesson are now saved in the site 003 folder, and all the changes we'll make in this lesson will be saved inside 004. In this lesson, we're going to take our templating one step further by talking about how to inject data into our template. Let's say, for example, that instead of hard coding the name Craig here, we wanted to inject that name using JavaScript. So I'm gonna jump into our main.js file, and here we can see a couple of what are called helpers, and we're gonna talk about how to create our own helper in order to injection some content. Now, we don't need the helpers that came with our starting web app here, so I'm gonna get rid of all three of these chunks of code here. We don't need the events, we don't need the uncreated event. We're just gonna get rid of all of that. But we do need to make sure that we leave this import statement for main.html and the import statement for template. Now at the moment, we don't need this one right here, so we're gonna get rid of it, and there we go. So again we're working in JavaScript now. But we're working with something very specific to Meteor. And more specifically, where we're working with the template class within Meteor, which allows us to inject content and data into our templates, and allows us to work with templates in a very dynamic way. So we're gonna create a helper for our body template. Now, we're actually gonna be injecting data into our user post template, but we're gonna be working with the body template. And I don't know if I've mentioned this before but the body is kind of a default template within Meteor. The only difference between it and any other type of template is that it doesn't have a name associated with it. And we don't create it using a template tag. Instead, we just create it using the usual HTML body tag. But in meteor, the body is treated like a template. Now usually, when you're dealing with templates in JavaScript, you would refer to the template by their name, but when we're dealing with a body, we can refer to it as if its name was body. So let's jump into main.js, and before we saw a hello template, for example, and the way we point in to that is we've typed Template.hello, and again this syntax here is not gonna work unless we use this import template statement. And once we include this import statement, then we have access to template.hello or template dot whatever template we're pointing to. Again, we're pointing to our body template here, so instead of pointing to a name, we're going to point to template.body, and then we're gonna create a helpers object. Now, the helpers object is a default way of injecting data into your template, and we're gonna see how to use that here. So we need parentheses and a JavaScript inside curly jacket and then inside these curly brackets we're gonna have as many property value pairs as we want to. Let's say that we want to create an object that we want access to from within our HTML called user posts. And we're gonna have multiple user posts, so this is gonna be an array. And the way we create an array in JavaScript is using square brackets. So inside this array, we can have any number of user posts, and we're gonna store some data in those user posts. So we're gonna create an object here and in that object, let's create a property called username, and we're gonna give our user a name of Craig, let's put a comma there. And then I'll just actually go ahead and spread this out a little bit. Okay, so we have a comma at the end. Let's also add a createdDate. So what date was this supposed to be created on? Let's say that it was created on, let's say it was created right now. So let's just create a new data object like so. So, put a comma after that and then let's create another object called test, I'm sorry, text. And we'll put some Lorem Ipsum text in here, and I'll just grab that text from inside our HTML, and then we'll paste it here. And there we go. So I'll put a comma at the end. So this represents one user post. So I'm going to copy that and paste it a couple of times, paste it three times. And then we might change some of these values here, so this might be Rob, this might be Billy, and then the last one might be Craig as well. And we could change the dates if we wanted to, let's just leave those as is. But for our other post, just so that we can see that they're all different, let's put some different text here, Post #2, here we'll put Happy Holidays and then I don't know, Post #3, all right. So we've got four different objects here in our Userposts array. And now I want to access this data from within our template. So let's save our JavaScript file, and let's see we can do that. Now again, the reason we can do that is because we've created a helpers object inside our body template or helper's object for our body template. So now we can go back to our main.html page and here's our body template, and here are our user posts. So now instead of injecting a single user post here, what I'm gonna do is I'm going to use the each keyword for Blaze, and we're gonna point to the user posts object inside our main.js body helpers object. So we're pointing to this object right here, this user post, which is an array of posts. So we're gonna skip a couple of lines and we'll put our closing each statement, which is just /each. And then in between the opening and closing each statements here, we're going to inject a userpost, I'm sorry, userpost singular template, which is this template down here. So now that we've injected this here, we have access to the properties inside these objects from within each of our user post templates. So for example, we have Craig here. Inside one of these user post templates, we have a username object. So let's copy username. Let's go back to our template, get rid of Craig, and we're gonna paste username, which is the name of that property. We can do the same thing for our creative date. We'll just come over here where our date is and we'll paste that createdDate property name, and then we can do this once again inside our paragraph. We'll go back to our main.js, and that's called text. So in our paragraph, we'll create an object called text, and there we go. So remember any time we're pointing to one of these properties, we're not using the greater than symbol. The greater than symbol is only for injecting templates without the greater than symbol, we're just injecting these values. So let's see if this works, let's save our HTML file our main.js file has already been saved. So let's jump into our page and we can see that everything updated just fine. We now have the different names in a different posts, we have the different texts and different dates but you get the basic idea. We've now injected these values into these posts making our templates much more valuable than it was before. And as a quick review, we were able to do that by creating a helpers object on our body template and in that helpers object, we created something called userposts. And this userposts is an array. And using this each syntax here, we were able to cycle through that array which is called userposts in our main.js. We were able to cycle through that array and for each instance of that array, for each item in that array, we injected a new template called userpost and injected the properties from that array object into that template. So if you've never done something like this, it can be a little bit confusing at first and this is really important to understand. So if you didn't fully grasp all the topics that we discussed in this lesson, it's worth going back and watching it again, and then trying to build this yourself without watching the video. Because again, it's really important to solidify this concept before we get any further. Because everything that we build, or a lot of what we build I should say, is built around this idea of templates and injecting data and things like that. So again, make sure you understand these concepts really well before you move forward. And if you need to refer to your project files to see all of the code that we see here, it will be saved in the site 004 folder. So thank you for watching and I'll see you in the next lesson.

Back to the top