Models The previous module of this course introduced Backbone JS, explained why it is helpful for the modern web application developer and provided a quick demonstration of some of its features. Now, it's time to begin examining Backbone in detail and the best place to begin is with models. Backbone is a collection of loosely components so it is certainly possible to build an application with Backbone and not use Backbone models, but you probably won't and I'll explain why. I'll demonstrate how to define your own model types, how to instantiate new model objects, how to get and set model properties, and how to use model events. Model identity has complexity because models are often synced to a server. The model has identity in your client application and the model has identity on the server. Backbone provides some support to help maintain the identity of model objects throughout their life cycle. Backbone models can declare default property values and finally, we'll look at Backbone support for model validation.
Views Views of the interface in both directions between your HTML document and your Backbone models end collections. For most applications, views will form the majority of your Backbone js code. (Silence) The first thing we need to cover is the high level description of what views are and how they're used. Then we'll move on to defining custom view types and instantiating instances of views. (Silence) Views provide a number of useful properties so we'll investigate each of those. Most views need to generate or modify some part of a HTML document and that is the random methods responsibility. (Silence) Views are often backed by a model. We'll have a look at how that's done. Views receive events from models and from the HTML document.
Collections There's only one thing better than the backbone model and that's a collection of backbone models. Collections group related models together at a convenient way to persist them and provide a set of helpful functions for dealing with sets of models. Just like models, a collection can be used as the basis for a view and binding a collection change event to a view's render function will automatically keep them in sync. When there is a set of models of the same type that you want to group together, use a collection. Collections have sorting capability that not only allows you to sort a collection but also to keep the collections sorted as models are added and removed. When working with collections, you are definitely going to want to move models in and out of the collection. There are many different ways to access models in a collection, the most basic being array-like random access. Backbone collections have 28 iterator methods. The things like funding a model, reducing a list, mapping a list, sorting, grouping, and shuffling. Like models, backbone in collections published a number of events. There are events from model added, model removed, model changed, model destroyed, collection synchronized, collection reset and validation error.
Connecting to a Server While backbone does not require a server, most people will use one. First to serve their application to the user's browser, and then to synchronize model data changes. Backbone implements the client's side of a simple RESTful protocol for persisting changes to model data. The service side of the protocol is easily implemented using your service side web framework of choice. This module is about how backbone. js transfers model data to and from the server. Same origin policy is a browser security feature that greatly complicates data synchronization. Cross-origin resource sharing also known as CORS is a technology that makes it easy again. There are two collection operations that sync to the server-- create and fetch. Models have three operations that sync to the server-- fetch, save, and destroy. The server has to implement a simple RESTful HTTP API. Backbone. sync is the function responsible for all server communications overrided at the model collection of global level to change the way that model synchronization works. Backbone. localStorage is a simple plug-in that overrides the global Backbone. sync function converting the default service synchronization into local synchronization that saves all data to the browser's local storage.