FREELessons: 24Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Rendering Views

Now that you know the basics of creating a view, let's actually talk about using the views to render actual content. The first thing we want to talk about is templates. Now there are dozens of ways to do templating with Backbone. You can precompile your templates on the server. You can include your templates as script tags in your HTML, or as strings within your JavaScript files, or load them separately as individual HTML files from the server. There's really no end to the way you could do it. So what I'm gonna show you in this screencast is kind of the default way that most people start with Backbone. And if you wanna be experimental later on, go ahead. But first, give this method a try. So the first step in this method would be to create your actual template text, which you often do as a script tag in your HTML. So I'm gonna create a new script tag here. And you have to give it some non JavaScript type so that the browser doesn't try to execute it as JavaScript. I usually use text/template. You'll also want to give it an id, so that you can access it. And the way I usually id my scripts, is by using whatever the class name that I'm writing it for is and just add maybe the text template to the end. Or, you could just name it after the class. I'm creating a template for the book view here. So, I'm going to call this BookViewTemplate. This is going to be whatever content we want to go inside of our list item here. So let's create, how about an h2, and this will be for the title. And then let me copy that and change this to an h3, and we'll put in the author. Now you'll notice these delimiters that I'm putting around the fields that we want to interpolate. These are the default delimeters that underscores template function uses. And we are going to be using underscores template function so that's why we're using those. Okay, so let's come back to our JavaScript here. The usual way to do this is to create a template property. And we want to use the _.template function to create our views template function. And we want to pass in the template text. So, I'll use jQuery to get book view template, and then let's do .html to get the HTML content of that tag. So that is how you would get your template. And now that we have our template text, we want to create our render function. So the render function is what we're going to use to actually render this view. Now I should note that there's nothing in Backbone that actually calls the render function, and so it's just called render by convention. You could really call this whatever you want because you are the only person gonna be calling this function. However, it's a smart idea to use render, because that's what pretty much everyone uses as their function name. And furthermore, if you ever use any Backbone extension libraries they may expect you to use render, because they're gonna call render for you or something like that. So it's a good idea to stick with convention in this case. So what we're going to do is say this.el, which refers the the element for this Backbone view. Remember how we talked about last time, you can use tagName, as we're using here, and also, class name and attributes to set up that element. That element is right here, this.el. Of course, if you assigned el directly, with the css selector, then this .el will equal that element. So we're gonna say this.el.innerHTML. And we'll set it to this.template, which is a function, right? Because _.template returns a function. But we have to pass in an object that will have the title and author values. And the way to do this is to say this.model .toJSON, just like that. So we're going to associate a model with this view eventually, and that model has a toJSON property which returns a JavaScript object of those attributes. And so we'll pass that to our template. Now it's also convention to return this from your render function and that means, later on, we'll be able to call render. And then get that element by calling el. So right now, let's give this a try, we have our books model here and let's do this, let's say, ver bookView= a new BookView and we go pass it on model which will be And now, we'll say, get that main element, and we can say append(bookView.render().el. And this is kind of the convention that a lot of people use. They gather View.render() that returns the view object. So, then you can say .el to get our freshly rendered element. So, let's see if this works. If we come back to our browser and refresh the page, you can see that we have Around the World in 80 Days, Jules Verne. And notice that it is inside a list item, you can see the little dot there. So this view successfully renders an individual model. Now, what if we want to create a view to render our entire book collection? So under here lets create a BooksView. And lets say Backbone.view.extend. And we won't set a tag name in this case because we just wanna div. We are gonna want a template, so lets head over here. I'm just gonna copy this first line of our script tag here. And we're gonna change this to the BooksViewTemplate and let's set this up, we'll give it an h1 and we'll say Book List at the top of our h1, and then down here, we will have an unordered list that holds all of our individual books. Okay, so you will notice that in this case, there's actually no reason to make this a template. Because we're not interpolating any values. But we may want to interpolate a value later. For example, well let's actually interpolate a value right here. We can have some parentheses. And let's include, we'll just call this length, I guess. Because our collections have a length property. And that way, we can have a number saying how many books are in our list. Okay, so now, let's get this template, and I could copy this line from up here. And we'll just change this to BooksView. Okay, and now let's create our render function. Now this time, the render function is gonna be a little bit different. We want to loop over all of the books in our books collection. And display each of them in list items inside of that unnumbered list. So I guess, we start by rendering our template, this.el.innerHTML = this.template. And let's just pass in (this.collection), because we know it has a link property. So, it will be able to use that to get the link there. And now that we've rendered our unrendered list, we need to actually display each item inside of that list. So, let's get that unrendered list, and you can use this.$, which is a version of jQuery that will limit itself to only finding elements within in this view, so I can say find the unordered list inside this view. And now this.collection.each, and we can loop over each model in the collection, and in here let's create a bookView ,that will be a new BookView and the model for that view will be set to the model that we just passed in to this call back. And then, we can say ul.append, and we will append bookView.render.el. There you go. So, we'll create our new bookView for that model, and then we'll render it and append its element to the unordered list. And so, this should give us a list of all of the books. So, now, I'm going to remove this line here, and let's create our booksView which will be a new BooksView instance. We will say it has a collection that equals books. And then, down here, we'll just change this to booksView.render().el. So, now, we should be rendering our entire list of books. Let's see if this works. And it looks like we have an error. Cannot read property 'el' of undefined on line 60. Oh yes, the problem is our BooksView render: function here does not return this at the end. Okay, so we'll return this, and so now you can see we have our list of books. We are successfully interpolating the number of books on the list, and we have a list of all the titles and their authors. So that is how you can make a views that successfully render both models and collections.

Back to the top