Backbone.js Tutorial Part 5 - Backbone.js Models: Syncing Models with the Server

Key Takeaways

backbone applications often but not always use models that are synchronized with a persistent store using restful API on the server backbone models provide an abstraction over the low-level API communication which results in a cleaner and simpler code for example instead of you manually making ax calls to the server to fetch the data you simply call the fetch method on your model the model would then take care of making an ax Call to get the data backbone models support three operations to work with the persistent store fetch to get the model from the server save to insert or update the model and Destroy to delete the model depending on the method you call backmon Will issue a get post put or delete HTTP request for example fetch always issues a get request save depending on the state of the object makes a post or a put request if the object is new it sends a post request otherwise it sends a put request how does backone know if the object is new or not well if it's been fetched from the server before it assumes that it's an existing object otherwise it assumes that it's a new object until it's Sav to the server and finally destroy always results in a delete request now you may wonder how backbone knows the URL of the API backbone relies on the URL root property of your models to construct the URL to the corresponding endpoint if you don't specify the URL route and call one of the operations to sync with the server you'll get an error that the URL is not defined so in this example we are telling backbone that all our songs are located at forward slash API songs on the server so if our website is hosted at example.com that will translate to example.com API songs now let's look at some specific examples in this slide I'm showing how we can fetch a model from the server so we are instantiating a song object with the idea one and calling the fetch method which results in an HTTP get to/ API songs1 here is another one in this example we construct a song object we fetch it from the server then we update the title property and find it called the save method in this case because the object has been fited from the server before it's an existing object and as a result backbone will issue a put request to/ API songs1 here is another one here we are instantiating a new song object setting its property and calling the Save which will result in a post request to the song's collection and finally here is another example where we destroy a model in which case a delete request is sent to/ API song1 note that by convention magon assumes your models have an attribute called ID which is used for uniquely identifying them if you use a different convention you can use the ID attribute to tell backbone which property of your model is used as the identifier in this example we are telling backbone that song ID should be used as the ID attribute not that all these methods are asynchronous and except a success and error call back the syntax is a little bit tricky and I have noticed many developers get stuck with this and think there's a bug and backbone so let me clarify this Fetch and Destroy are the easy ones just Supply the Callback functions as you see in the slide the save method however is a little bit different with the save method our callback functions are wrapped with an object that is the second argument to the save method not the first one the first argument is a hash of the attributes you would like to change it's kind of a shortcut that lets you pass the attributes here and save them to the server it's similar to setting them using the set method and then calling the save method so I personally always set values using the set method and then call the save method with an empty object as the first argument or you can also pass a null object note that if you accidentally forget to pass the first argument your success and error callbacks won't be executed upon return from the server so that's the tricky part okay at this point you should have a good understanding of models and how to work with them before proceeding to the next section make sure to take the many project that I've included at the end of this section if you have any questions feel free to post them in the discussions area I'm here to help you thank you for watching