Add REST storage

app/js/app.js

@@ -8,6 +8,12 @@ ContactManager.addRegions({
   mainRegion: '.main-container'
 });
 
+ContactManager.addInitializer(function() {
+  $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
+    options.url = 'http://contact-manager-api.herokuapp.com/' + options.url;
+  });
+});
+
 ContactManager.addInitializer(function(data) {
   var contacts = new ContactManager.Collections.Contacts(),
       router = new ContactManager.Router(),

app/js/collections/contacts.js

@@ -1,4 +1,4 @@
 ContactManager.Collections.Contacts = Backbone.Collection.extend({
   model: ContactManager.Models.Contact,
-  localStorage: new Backbone.LocalStorage('contacts')
+  url: 'contacts'
 });

app/js/controller.js

@@ -3,25 +3,23 @@ ContactManager.Controller = Marionette.Controller.extend({
     this._router = options.router;
     this._mainRegion = options.mainRegion;
     this._contacts = options.contacts;
-
-    this._contacts.fetch();
-
-    if (this._contacts.isEmpty()) {
-      this._createSampleData();
-    }
   },
 
   showContacts: function() {
+    this._fetchContacts().then(_.bind(this.showContactsSync, this));
+  },
+
+  showContactsSync: function() {
     var contactsView = new ContactManager.Views.Contacts({
       collection: this._contacts
     });
 
-    this.listenTo(contactsView, 'addContact:clicked', this.newContact);
+    this.listenTo(contactsView, 'addContact:clicked', this.newContactSync);
     this.listenTo(contactsView, 'itemview:delete:clicked', function(contactView) {
       contactView.model.destroy();
     });
     this.listenTo(contactsView, 'itemview:edit:clicked', function(contactView) {
-      this.editContact(contactView.model.id);
+      this.editContactSync(contactView.model.id);
     });
 
     ContactManager.mainRegion.show(contactsView);
@@ -30,24 +28,32 @@ ContactManager.Controller = Marionette.Controller.extend({
   },
 
   newContact: function() {
+    this._fetchContacts().then(_.bind(this.newContactSync, this));
+  },
+
+  newContactSync: function() {
     var newContactForm = new ContactManager.Views.ContactForm({
       model: new ContactManager.Models.Contact()
     });
 
     this.listenTo(newContactForm, 'form:submitted', function(attrs) {
       attrs.avatar = _.random(1, 15) + '.jpg';
-      this._contacts.create(attrs);
-      this.showContacts();
+      this._contacts.create(attrs, {wait: true});
+      this.showContactsSync();
     });
 
-    this.listenTo(newContactForm, 'form:canceled', this.showContacts);
+    this.listenTo(newContactForm, 'form:canceled', this.showContactsSync);
 
     ContactManager.mainRegion.show(newContactForm);
 
     this._router.navigate('contacts/new');
   },
 
   editContact: function(id) {
+    this._fetchContacts().then(_.bind(this.editContactSync, this, id));
+  },
+
+  editContactSync: function(id) {
     var contact = this._contacts.get(id),
         editContactForm;
 
@@ -58,10 +64,10 @@ ContactManager.Controller = Marionette.Controller.extend({
 
       this.listenTo(editContactForm, 'form:submitted', function(attrs) {
         contact.save(attrs);
-        this.showContacts();
+        this.showContactsSync();
       });
 
-      this.listenTo(editContactForm, 'form:canceled', this.showContacts);
+      this.listenTo(editContactForm, 'form:canceled', this.showContactsSync);
 
       ContactManager.mainRegion.show(editContactForm);
 
@@ -71,51 +77,8 @@ ContactManager.Controller = Marionette.Controller.extend({
     }
   },
 
-  _createSampleData: function() {
-    _.each([
-      {
-        id: 1,
-        name : 'Terrence S. Hatfield',
-        tel: '651-603-1723',
-        email: '[email protected]',
-        avatar: '1.jpg'
-      },
-      {
-        id: 2,
-        name : 'Chris M. Manning',
-        tel: '513-307-5859',
-        email: '[email protected]',
-        avatar: '2.jpg'
-      },
-      {
-        id: 3,
-        name : 'Ricky M. Digiacomo',
-        tel: '918-774-0199',
-        email: '[email protected]',
-        avatar: '3.jpg'
-      },
-      {
-        id: 4,
-        name : 'Michael K. Bayne',
-        tel: '702-989-5145',
-        email: '[email protected]',
-        avatar: '4.jpg'
-      },
-      {
-        id: 5,
-        name : 'John I. Wilson',
-        tel: '318-292-6700',
-        email: '[email protected]',
-        avatar: '5.jpg'
-      },
-      {
-        id: 6,
-        name : 'Rodolfo P. Robinett',
-        tel: '803-557-9815',
-        email: '[email protected]',
-        avatar: '6.jpg'
-      }], function(contact) {
-        this._contacts.create(contact);
-      }, this);
+  _fetchContacts: function() {
+    this._contactsFetching = this._contactsFetching || this._contacts.fetch();
+    return this._contactsFetching;
   }
 });

bower.json

@@ -11,7 +11,6 @@
     "backbone": "~1.1.0",
     "jquery": "~2.1.0",
     "underscore": "~1.5.2",
-    "marionette": "~1.6.1",
-    "Backbone.localStorage": "~1.1.7"
+    "marionette": "~1.6.1"
   }
 }

index.html

@@ -92,7 +92,6 @@ <h2 class="page-header text-center"><%= isNew ? 'Create' : 'Edit' %> Contact</h2
     <script src="vendor/underscore/underscore.js"></script>
     <script src="vendor/backbone/backbone.js"></script>
     <script src="vendor/marionette/lib/backbone.marionette.js"></script>
-    <script src="vendor/Backbone.localStorage/backbone.localStorage.js"></script>
 
     <script src="app/js/app.js"></script>
     <script src="app/js/models/contact.js"></script>