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

2.2 Working With Model Attributes

Backbone models have a lot of different methods that you can use to access their properties. And so we're gonna look at a bunch of those in this lesson. Hopefully you won't find this lesson too much like reading the documentation, but I think you'll find that knowing all these methods will help you use your Backbone models as they are intended to be used. So the model that we're going to be using here is just the model that we created last time. It's very simple, just a basic Backbone model. We've extended it with pretty much nothing at this point. We'll look at the common things to extend it with in another lesson, but for now we're just going to use a basic book model. And I'll go ahead and create our book here by saying new book. Now, you already know that we can set attributes on our model at the time of creation by passing them in as an object literal, the first parameter to our constructor function here. So I could say, for example, title, and we can give it a title just like that. Now, you also know that we can get a property by saying book.get. And so I can say book.get title, and you can see we have Sign of the Four. Now, we can also use book.set to set new properties on our model. And we can do this with one of two syntaxes. First of all, we could pass the attribute name as the first parameter. So I could say author, and then I could say Arthur Conan Doyle as the second parameter. And now you can see if I say book.get Author, you can see that we have set that property. The other way to do this with book.set is to pass in object literal. So it could say book.set, and I could write publish date, for example, as my key, and I could have, I think it's about 1893. That might not be too accurate but the point is you can set a property like this, with an object literal. This syntax also allows you to set multiple keys at once, so I could have publish_date like that and I could say something like in_stock equals true. And now I can do book.get publish_date and I can also do book.get in_stock, and you can see these values come right up. Now it's possible for you to have HTML within some of these attributes. Let's go ahead and do that. Let's do book.set and we will go ahead and set the displayTitle, for lack of a better name, and we'll just set it to h1 Sign of the Four. So now if I say book.get you'll see that it returns with the HTML intact, just like that. And if we were using this in a template, we could use that to insert some HTML right on to the page. However sometimes, you might want to get it, but you might want to escape any HTML, or other usually escaped characters in that string. So, for that, you can use the escape method. And you can see if we do this, those special characters have been escaped. And so this is a handy way of getting properties and not having to worry about escaping them yourself. Now if you want to find out if your model has an attribute, you can use the model's has property. So I could say, does the book have a display title? And as you can see we have the response true. Now, I can also, if I want to remove an attribute, use the unset method. So I say book.unset displayTitle, and then I'll once again run book.has displayTitle. You can see that this time, we get false as our response, which means that the displayTitle property has been removed. If you want to remove all the properties, you can do book.clear. And I'm not actually gonna do that because that would remove all my properties. But if you run book.clear, you could go ahead and remove all the properties of your model. Now if you look at the model object. You can see that it's not just an object literal. It's got a bunch of stuff going on here. And sometimes you just want just a plain object literal with the properties that a given model has. Now, you could actually see them all In the attributes object here. For example, if I do, you can see it has an attributes object, and this is where everything is stored. I could say book.attributes, and you can see that is the object literal where all those values are stored. And so because this attribute's object is used internally, you shouldn't really access it directly. But you can easily get a copy of it by using the toJSON method. And we'll use this method actually quite a bit when working with templates. Often we'll pass our template the result of model .toJSON which returns an object literal with the different attributes in the model. If you look at the book.toJSON method you can see that all it really does is clone a copy of the attributes object. So it gives you a copy of it so you don't have to worry about accidentally changing anything inside the model. A Backbone model also gives you some interesting techniques for finding out what values have been recently changed or what previous values of a certain attribute were. For example, if I say book.hasChanged and let's pass it the author attribute, you can see that we get false as a response. HasChanged takes one of these attributes as its parameter, and it will return true if that attribute was changed in the last set. You can find out what values were changed in the last set if you go to book.changed. And you can see in the last set, displayTitle was set to undefined. So if I say book.hasChanged displayTitle, you can see the response is true because the last set that we did was specifically for display title. And it was actually using the unset method, but that counts as a set on an attribute. Now, if you wanna get a copy of this changed property here, you can do book.changedAttributes. And this is a function which, if you call it, you can see we get an object returned here with display titles. And just like the toJSON, you can see, well it's a little more complex but basically what it does is clone this.changed if this.changed exists. Backbone models also, interestingly, keep track of whatever the previous values of any given property was. So if I say book.previous, this is actually a function. So I could say book.previous of displayTitle, and we can see that the previous value of displayTitle was h1, Sign of the Four, closing h1 tag. And this is really neat because we got rid of display one quite a while ago, but that model still keeps track of what its previous value was, just in case we ever want to reuse that. And of course there's one more method here which we can use, which is previousAttributes. And this will return an object which has what each one of attributes were previous to the last set. So you can most of these did not change since the last set however display title is among them, and so this is basically what the response from toJSON would have looked like before the last set call that we did. Finally, you'll recall that Backbone depends on underscore. There are a couple of reasons for this, and one of those reasons is that the model inherits a bunch of underscore methods. So for example we can say book.keys to get an array of all the keys, or the property names of our properties. We can also do model .values to get an array of what those values are. If we want to get the keys and their respective values as a set of arrays, we can do model .pairs and as you can see this returns a set of arrays, each of which has first the property name and second the property value. If we want to reverse the keys and values, we could say book or model .invert. And this will return an object where the key is what the value used to be and the value is what the key used to be. So you can see here now, Sign of the Four is the key name for the value title, where true is the key name for in_stock. Of course, these keys will all be converted to strings so they're not actually going to be their original data types, but this might still be useful depending on your application. Finally, we could do book.pick, which will take a list of properties, which would be the attribute names. So, I could say, author and title. And, you can see, we have an object returned with just the author and the title. The opposite of this would be omit. So, I could say, book.omit, and I could say omit time, and now you can see that we've got an object with all of the keys except for the one we omitted. So those are the underscore methods that Backbone uses. And that's pretty much all the different ways that you can get and set properties on your Backbone model.

Back to the top