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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.