feat(example): enable offline storage driver switching

localForage · Feb 27, 2015 · 76a0c24 · 76a0c24
1 parent ce62979
commit 76a0c24
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/examples/main.js b/examples/main.js
@@ -66,7 +66,7 @@
 
         refresh: function (event) {
             event.preventDefault();
-            collection.fetch({reset: true});
+            refreshCollection();
         },
 
         updateSaveIcon: function () {
@@ -81,6 +81,7 @@
       initialize: function () {
           this.listenTo(this.collection, 'add', this.addItemView);
           this.listenTo(this.collection, 'remove', this.removeItem);
+          this.listenTo(this.collection, 'reset', this.reset);
           this._itemsView = {};
       },
 
@@ -96,8 +97,12 @@
           delete this._itemsView[model.id];
       },
 
+      reset: function (model, options) {
+        options.previousModels.map(this.removeItem, this);
+      },
+
       render: function () {
-          this.collection.map(this.addItemView);
+          this.collection.map(this.addItemView, this);
           return this;
       }
     });
@@ -117,8 +122,14 @@
         },
 
         render: function () {
+            // build the model localeForage key only for debug purpose
+            // at this point this key might not have been set if no sync
+            // operation has been made
+            this.model.sync._localeForageKeyFn(this.model);
+
             this.$el.html(this.template({
-                content: this.model.get('content')
+                content: this.model.get('content'),
+                syncKey: this.model.sync.localforageKey
             }));
             return this;
         },
@@ -176,15 +187,21 @@
         onTabItemChange: function (event) {
             event.preventDefault();
             var driverName = $(event.currentTarget).data('item');
-            localforage.setDriver(localforage[driverName]).then(
-                _.bind(this.showActiveDriver, this)
-            );
+            localforage.setDriver(localforage[driverName]).then(_.bind(function () {
+                this.showActiveDriver();
+                refreshCollection();
+            }, this));
         }
     });
 
     // Instancing the collection and the view
     var collection = new ListCollection();
 
+    var refreshCollection = function () {
+        collection.reset(); // clear collection before
+        collection.fetch();
+    };
+
     var formView = new FormView({
         el: $('header'),
         collection: collection

diff --git a/examples/simple.html b/examples/simple.html
@@ -23,7 +23,6 @@
         </form>
     </script>
     <script type="template/form" id="itemtpl">
-        <%= content %>
         <div class="pull-right">
             <button class="btn btn-rounded" data-action="edit">
                 <span class="icon icon-edit"></span>
@@ -32,6 +31,8 @@
                 <span class="icon icon-close"></span>
             </button>
         </div>
+        <p class="item-content"><%= content %></p>
+        <p class="item-sync-key"><%= syncKey %></p>
     </script>
 
     <script type="template/form" id="footertpl">
@@ -89,6 +90,19 @@
             padding-right: 15px;
         }
 
+        .table-view-cell p {
+            word-wrap: break-word;
+        }
+
+        .item-content {
+            padding-right: 70px;
+        }
+
+        .item-sync-key {
+            font-size: 10px;
+            color: #aaa;
+        }
+
         .tab-item .icon-check {
             color: #5cb85c;
         }