Store data in LocalStorage

README.md

@@ -19,6 +19,8 @@ http://dmytroyarmak.github.io/codeangels-marionette-introduction
 - [Step 6 - Use Controller](https://github.com/dmytroyarmak/marionette-contact-manager/releases/tag/step-6)
 - [Step 7 - Use AppRouter](https://github.com/dmytroyarmak/marionette-contact-manager/releases/tag/step-7)
 - [Step 8 - Remove dependency to router](https://github.com/dmytroyarmak/marionette-contact-manager/releases/tag/step-8)
+- [Step 9 - Store data in localStorage](https://github.com/dmytroyarmak/marionette-contact-manager/releases/tag/step-9)
+- [Step 10 - Store data in RESTful backend ](https://github.com/dmytroyarmak/marionette-contact-manager/releases/tag/step-10)
 
 ## Previous lesson
 https://github.com/dmytroyarmak/backbone-contact-manager

app/js/app.js

@@ -9,7 +9,7 @@ ContactManager.addRegions({
 });
 
 ContactManager.addInitializer(function(data) {
-  var contacts = new ContactManager.Collections.Contacts(data.contacts),
+  var contacts = new ContactManager.Collections.Contacts(),
       router = new ContactManager.Router(),
       controller = new ContactManager.Controller({
         contacts: contacts,

app/js/collections/contacts.js

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

app/js/controller.js

@@ -1,8 +1,14 @@
 ContactManager.Controller = Marionette.Controller.extend({
   initialize: function(options) {
-    this._contacts = options.contacts;
     this._router = options.router;
     this._mainRegion = options.mainRegion;
+    this._contacts = options.contacts;
+
+    this._contacts.fetch();
+
+    if (this._contacts.isEmpty()) {
+      this._createSampleData();
+    }
   },
 
   showContacts: function() {
@@ -12,7 +18,7 @@ ContactManager.Controller = Marionette.Controller.extend({
 
     this.listenTo(contactsView, 'addContact:clicked', this.newContact);
     this.listenTo(contactsView, 'itemview:delete:clicked', function(contactView) {
-      this._contacts.remove(contactView.model);
+      contactView.model.destroy();
     });
     this.listenTo(contactsView, 'itemview:edit:clicked', function(contactView) {
       this.editContact(contactView.model.id);
@@ -29,8 +35,8 @@ ContactManager.Controller = Marionette.Controller.extend({
     });
 
     this.listenTo(newContactForm, 'form:submitted', function(attrs) {
-      attrs.id = this._contacts.isEmpty() ? 1 : (_.max(this._contacts.pluck('id')) + 1);
-      this._contacts.add(attrs);
+      attrs.avatar = _.random(1, 15) + '.jpg';
+      this._contacts.create(attrs);
       this.showContacts();
     });
 
@@ -51,7 +57,7 @@ ContactManager.Controller = Marionette.Controller.extend({
       });
 
       this.listenTo(editContactForm, 'form:submitted', function(attrs) {
-        contact.set(attrs);
+        contact.save(attrs);
         this.showContacts();
       });
 
@@ -63,5 +69,53 @@ ContactManager.Controller = Marionette.Controller.extend({
     } else {
       this.showContacts();
     }
+  },
+
+  _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);
   }
 });

app/js/models/contact.js

@@ -4,9 +4,5 @@ ContactManager.Models.Contact = Backbone.Model.extend({
     tel: null,
     email: null,
     avatar: null
-  },
-
-  initialize: function() {
-    this.set('avatar', _.random(1, 15) + '.jpg');
   }
 });

bower.json

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

index.html

@@ -92,6 +92,7 @@ <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>
@@ -104,46 +105,7 @@ <h2 class="page-header text-center"><%= isNew ? 'Create' : 'Edit' %> Contact</h2
 
     <script>
       $(function() {
-        ContactManager.start({
-          contacts: [
-            {
-              id: 1,
-              name : 'Terrence S. Hatfield',
-              tel: '651-603-1723',
-              email: '[email protected]'
-            },
-            {
-              id: 2,
-              name : 'Chris M. Manning',
-              tel: '513-307-5859',
-              email: '[email protected]'
-            },
-            {
-              id: 3,
-              name : 'Ricky M. Digiacomo',
-              tel: '918-774-0199',
-              email: '[email protected]'
-            },
-            {
-              id: 4,
-              name : 'Michael K. Bayne',
-              tel: '702-989-5145',
-              email: '[email protected]'
-            },
-            {
-              id: 5,
-              name : 'John I. Wilson',
-              tel: '318-292-6700',
-              email: '[email protected]'
-            },
-            {
-              id: 6,
-              name : 'Rodolfo P. Robinett',
-              tel: '803-557-9815',
-              email: '[email protected]'
-            }
-          ]
-        });
+        ContactManager.start();
       });
     </script>
   </body>