Understanding Backbone Use in a Contact App
· Keep index.html as simple as possible.
· TemplateView.js holds our extension of Backbone for our templates. We can build additional views off of this.
· It is a good practice to create and declare a new instance of the router in a file (app.js) separate from the execution of the router (in ContactList.js). This allows your code to play nicely with others.
· Within the extension of Backbone.Router, create the new instance of collection and the new instance of view before Backbone.history.start() in the initialize function.
· In this example, test data is provided as an array of objects passed to the collection and view.
· The major parts of the ContactList.js include the extension of the Backbone Model, View and Collection.
· First, the model is defined. The validate function checks for unique e-mail addresses within the list of contacts and returns an error message if the contact information to be added is not a unique e-mail address, a name or an e-mail address.
· Backbone.ContactView extends Backbone.TemplateView, which is a view extension of Backbone. Within this extension, the div of index.html is selected and the view of app.html is applied. The events allow for the addition and removal of contacts.
· Backbone.ContactList extends the collection through the model.
· Within the template file, app.html, using type and placeholder=”” required takes advantage of HTML5 features that create selectivity. The “delete-contact” class is selected in the events of Backbone.ContactView, which gives functionality to the “X” on the page.