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

2.7 Creating Model Methods

So far, all the functionality that we've looked at in models is something that Backbone either provides for you by default or expects you to override to provide some kind of default behavior. However, you can definitely add your own behavior to your Backbone models. So we're going to look at doing that in this screencast. Right here we've got our book model, which we've been working with so far throughout these lessons. And what we can do is just add another method. So, a book has chapters and you read through a book, right? So, let's actually before we add a method, start by adding some defaults. We'll just say by default a book has, let's say, five chapters by default, and the current chapter, by default, will be one. All right, and so now we can have a function that we call read and what this will do is simply read another chapter. So what we'll do in here is say, if (this.get('current') Then what we can do is this.set('current'). And actually let's put current in variable, because we'll use it a couple times here. So we'll say this.get('current'). If current is less than the number of chapters then we'll set current= curr +1. So we'll just read another chapter if there is another chapter left to read. And now that we have updated our current value, if we have any part of our application that needs to update when we read another chapter of our book. We can be listening for the change:current property and perform some update at this time. Let's add another method here, and we'll call this isFinished and this can simply return if this.getchapters is equal to this.getcurrent. Okay, so we can see this in action if we come to the browser. And let me refresh the page, I will create a new book. And because I have a default current in chapter property, you can see we have these in here, and we don't have to do anything about it. So we can say book.read, and now if I say book.attributes, or actually let's just say book.get('current'), you can see that we're currently reading chapter 2. Let's say book.isFinished. You can see it's false, so I'll do book.read again. If I read the book again, you can see currently the chapter is 4. Let's do one more book.read and get the chapter is 5. Good, and so now let's say book.isFinished and you can see that is set to true. And if we read another chapter, you can see that, because of the if statement, we can't actually go past the fifth chapter, which makes perfect sense. So this is just a simple example of how you might add functionality to your Backbone models. And of course, you could do the same thing with collections and views. You can add any methods you'd like to your model prototype, and this is a great place to put any business logic regarding your models. Anytime you need to do any calculations or anything like we're doing here, do it in the model and then the view can just display that data.

Back to the top