Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:24Length:1.8 hours
Backbone
  • Overview
  • Transcript

2.1 Creating Models

This is the first in a series of lessons in which we're going to look at Backbone models. So for starters, let's just look at how we can create a very simple model class. First of all, you're going to name your model and you're probably going to give it a singular name. Something like book. This is the example we're gonna work with throughout these lessons. A book and a collection of books and modifying and working with those. So we're gonna call our model book. And as we saw in the previous screencast, you can create a new model by extending the built-in model class. So I'll say Backbone.Model.extend. And of course, we'll start by just pasting extend an empty object to extend the Backbone model class with, and so we have a model class named book. Now, we're going to look at all the different attributes and methods that we can use with a model in the next couple of screencasts. But for now, let's also add one attribute to this class. And this is going to be the defaults attribute. The defaults attribute will either be either an object or it will be a function that returns an object. And this defaults, and each of the properties here will be default properties or default attributes on our individual book instances. So actually, before we do that, let's get rid of this, and we'll go ahead and give this a try. So at this point, we can create a book instance by saying new book, just like that. And if I create a book without giving it any attributes, and now I say book.get, and let's for example get the title. You can see that undefined is returned because the book as no title. However, if I add a defaults property here, any attributes that we give to this defaults object will be set as default properties for book instances that are created without any attribute of their own. So for example, I could set the defaults title of this book to, let's just set it to XXX for now, and now, if I refresh this page and let's create a new book. And I can say book.get title. And you can see that the default title is XXX. If we haven't set a title, that's what it is. Let's create a new book here, but this time we will give it a title, and we'll just set the title to YYY for now. Notice we used the same syntax we looked at in the previous lesson, where we pass in an object and each of the attributes and values within there will become properties of our model instance. So now I can say, book.get title and you can see the value that we gave it, YYY, overrode the default value of XXX. Now as I said, this doesn't have to be a static object like this. We could also do a function. And you'll find this with a lot of Backbone properties. They'll either be just a basic property, or they can take a function that returns whatever that property should be, whether it's a string, or an object. So here for example, I could say we want this book and let's just give it a time property which really doesn't make sense for a book, but we could set this to be a new date. And this way, whenever we create a new book, if I say var book equals new book, and then book.get time. And you can see that we get the current date. And the benefit of course, of doing this inside of a function and returning that object is of course, if we created this defaults property as just an object literal by itself, the time property for each book instance would be the date and time at the time the model was created, and not when the individual instances were created. Because there would be no function to run when the model is created. So that is how we can create Backbone models. And we'll look at more about how to use these in the next couple of lessons.

Back to the top