FREELessons: 24Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Creating Views

Now that we've looked at models and collections, we're ready to move on to views. So let's create our first view. The first thing you have to think about is naming your views. Most often, you're creating a view that is intended to either display a collection or a model. So I tend to name my views after my collections or models and then just tag the word view on the end. For example if I want to make a view for a book model I'm going to call the class BookView. Now of course just like with our other components, we can create it by extending Backbone.View in this case. I think you'll find when you build your Backbone applications, that a lot of the code goes into displaying the views. Not because you actually have a lot of logic in the view, but because it has to manage creating the dom and working with dom events and that type of thing. So let's first look at a couple of attributes that you are likely to use. First of all, is tag name. You can choose what the root element of your Backbone View will be, by setting a tag name. So for example, if I want just to display my book as a list item, I would set the tag name to Li. By default, the tag name is div. So if you just wanna use the div you can leave the tag name property out all together. You can also apply some classes to that element, using the class theme attribute. So, if I wanted to add the class book or book item or something like that. If you wanna have multiple classes, that's definitely possible. You just put whatever you would put in the class attribute on the HTML element as the value for the class name property. You can also add other attributes to your root element using the attributes key. This can either be an object literal or a function that returns an object. For example, if I want to set an attribute based on the ID of the model being used I might return something like data-client-id and I might set that to this.model.cid or something like that. When we create an instance of our book view class here, this.model will refer to the model that we use. Of course, data-client-id is the name of the attribute and you can add any elements here. So for an example, if you had a backbone view that was say to display a canvas element or maybe an image you might have height or width attributes that you want to add, something like that. There's one more attribute that I wanna talk about in this view introduction lesson and that is el. El is a property that you would use instead of tagName, className, and attributes. See, tagName, className, and attributes set up that root element that you are creating for this view. However, it's possible that you already have an element on the page and you want to use that as the root element for your view. For example, let me create another view here, often the pattern I will use is I create a MainView which is kind of the root view of my application. It's the biggest view that kind of manages each of the child views. Now usually, I'll have a div with an id of main all ready in the HTML, as you can see right here. So what you can do is set this equal to a CSS selector that references that. So for example, I might say #main. Notice that I do include the hash. Because this is a CSS selector, jQuery will be used behind the scenes to capture this. So now this main view will use this div here as the root for anything that we want to put inside of it. So, this gives you an idea of how you can start creating your Backbone views. And in the next couple of lessons we'll look at how we can use views to display models and collections.

Back to the top