Backbone.Marionette app - use Bower components

#475

labs/architecture-examples/backbone_marionette/component.json

+{
+  "name": "todomvc-backbone-marionette",
+  "version": "0.0.0",
+  "dependencies": {
+    "todomvc-common": "~0.1.0",
+    "lodash": "~1.0.1",
+    "backbone.localStorage": "~1.1.0",
+    "backbone.marionette": "~1.0.0-rc6"
+  }
+}

labs/architecture-examples/backbone_marionette/components/backbone.localStorage/backbone.localStorage.js

+/**
+ * Backbone localStorage Adapter
+ * Version 1.1.0
+ *
+ * https://github.com/jeromegn/Backbone.localStorage
+ */
+(function (root, factory) {
+   if (typeof define === "function" && define.amd) {
+      // AMD. Register as an anonymous module.
+      define(["underscore","backbone"], function(_, Backbone) {
+        // Use global variables if the locals is undefined.
+        return factory(_ || root._, Backbone || root.Backbone);
+      });
+   } else {
+      // RequireJS isn't being used. Assume underscore and backbone is loaded in <script> tags
+      factory(_, Backbone);
+   }
+}(this, function(_, Backbone) {
+// A simple module to replace `Backbone.sync` with *localStorage*-based
+// persistence. Models are given GUIDS, and saved into a JSON object. Simple
+// as that.
+
+// Hold reference to Underscore.js and Backbone.js in the closure in order
+// to make things work even if they are removed from the global namespace
+
+// Generate four random hex digits.
+function S4() {
+   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+};
+
+// Generate a pseudo-GUID by concatenating random hexadecimal.
+function guid() {
+   return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
+};
+
+// Our Store is represented by a single JS object in *localStorage*. Create it
+// with a meaningful name, like the name you'd give a table.
+// window.Store is deprectated, use Backbone.LocalStorage instead
+Backbone.LocalStorage = window.Store = function(name) {
+  this.name = name;
+  var store = this.localStorage().getItem(this.name);
+  this.records = (store && store.split(",")) || [];
+};
+
+_.extend(Backbone.LocalStorage.prototype, {
+
+  // Save the current state of the **Store** to *localStorage*.
+  save: function() {
+    this.localStorage().setItem(this.name, this.records.join(","));
+  },
+
+  // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
+  // have an id of it's own.
+  create: function(model) {
+    if (!model.id) {
+      model.id = guid();
+      model.set(model.idAttribute, model.id);
+    }
+    this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
+    this.records.push(model.id.toString());
+    this.save();
+    return this.find(model);
+  },
+
+  // Update a model by replacing its copy in `this.data`.
+  update: function(model) {
+    this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
+    if (!_.include(this.records, model.id.toString()))
+      this.records.push(model.id.toString()); this.save();
+    return this.find(model);
+  },
+
+  // Retrieve a model from `this.data` by id.
+  find: function(model) {
+    return this.jsonData(this.localStorage().getItem(this.name+"-"+model.id));
+  },
+
+  // Return the array of all models currently in storage.
+  findAll: function() {
+    return _(this.records).chain()
+      .map(function(id){
+        return this.jsonData(this.localStorage().getItem(this.name+"-"+id));
+      }, this)
+      .compact()
+      .value();
+  },
+
+  // Delete a model from `this.data`, returning it.
+  destroy: function(model) {
+    if (model.isNew())
+      return false
+    this.localStorage().removeItem(this.name+"-"+model.id);
+    this.records = _.reject(this.records, function(id){
+      return id === model.id.toString();
+    });
+    this.save();
+    return model;
+  },
+
+  localStorage: function() {
+    return localStorage;
+  },
+  
+  // fix for "illegal access" error on Android when JSON.parse is passed null
+  jsonData: function (data) {
+      return data && JSON.parse(data);
+  }
+
+});
+
+// localSync delegate to the model or collection's
+// *localStorage* property, which should be an instance of `Store`.
+// window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
+Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function(method, model, options) {
+  var store = model.localStorage || model.collection.localStorage;
+
+  var resp, errorMessage, syncDfd = $.Deferred && $.Deferred(); //If $ is having Deferred - use it. 
+
+  try {
+
+    switch (method) {
+      case "read":
+        resp = model.id != undefined ? store.find(model) : store.findAll();
+        break;
+      case "create":
+        resp = store.create(model);
+        break;
+      case "update":
+        resp = store.update(model);
+        break;
+      case "delete":
+        resp = store.destroy(model);
+        break;
+    }
+
+  } catch(error) {
+    if (error.code === DOMException.QUOTA_EXCEEDED_ERR && window.localStorage.length === 0)
+      errorMessage = "Private browsing is unsupported";
+    else
+      errorMessage = error.message;
+  }
+
+  if (resp) {
+    if (options && options.success)
+      if (Backbone.VERSION === "0.9.10") {
+        options.success(model, resp, options);
+      } else {
+        options.success(resp);
+      }
+    if (syncDfd)
+      syncDfd.resolve(resp);
+
+  } else {
+    errorMessage = errorMessage ? errorMessage
+                                : "Record Not Found";
+    
+    if (options && options.error)
+      if (Backbone.VERSION === "0.9.10") {
+        options.error(model, errorMessage, options);
+      } else {
+        options.error(errorMessage);
+      }
+      
+    if (syncDfd)
+      syncDfd.reject(errorMessage);
+  }
+  
+  // add compatibility with $.ajax
+  // always execute callback for success and error
+  if (options && options.complete) options.complete(resp);
+
+  return syncDfd && syncDfd.promise();
+};
+
+Backbone.ajaxSync = Backbone.sync;
+
+Backbone.getSyncMethod = function(model) {
+  if(model.localStorage || (model.collection && model.collection.localStorage)) {
+    return Backbone.localSync;
+  }
+
+  return Backbone.ajaxSync;
+};
+
+// Override 'Backbone.sync' to default to localSync,
+// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
+Backbone.sync = function(method, model, options) {
+  return Backbone.getSyncMethod(model).apply(this, [method, model, options]);
+};
+
+return Backbone.LocalStorage;
+}));
\ No newline at end of file

labs/architecture-examples/backbone_marionette/js/lib/backbone.marionette.js → labs/architecture-examples/backbone_marionette/components/backbone.marionette/lib/backbone.marionette.js

- // Backbone.Marionette, v1.0.0-rc5
+ // Backbone.Marionette, v1.0.0-rc6
  // Copyright (c)2013 Derick Bailey, Muted Solutions, LLC.
  // Distributed under MIT license
  // http://github.com/marionettejs/backbone.marionette
@@ -1240,8 +1240,16 @@ Marionette.CollectionView = Marionette.View.extend({
   // the collection view.
   render: function(){
     this.isClosed = false;
-
     this.triggerBeforeRender();
+    this._renderChildren();
+    this.triggerRendered();
+    return this;
+  },
+
+  // Internal method. Separated so that CompositeView can have
+  // more control over events being triggered, around the rendering
+  // process
+  _renderChildren: function(){
     this.closeEmptyView();
     this.closeChildren();
 
@@ -1250,9 +1258,6 @@ Marionette.CollectionView = Marionette.View.extend({
     } else {
       this.showEmptyView();
     }
-
-    this.triggerRendered();
-    return this;
   },
 
   // Internal method to loop through each item in the
@@ -1462,7 +1467,7 @@ Marionette.CompositeView = Marionette.CollectionView.extend({
     if (this.collection){
       this.listenTo(this.collection, "add", this.addChildView, this);
       this.listenTo(this.collection, "remove", this.removeItemView, this);
-      this.listenTo(this.collection, "reset", this.renderCollection, this);
+      this.listenTo(this.collection, "reset", this._renderChildren, this);
     }
   },
 
@@ -1500,30 +1505,34 @@ Marionette.CompositeView = Marionette.CollectionView.extend({
   // but the collection will not re-render.
   render: function(){
     this.isClosed = false;
-
     this.resetItemViewContainer();
 
+    this.triggerBeforeRender();
     var html = this.renderModel();
     this.$el.html(html);
-
     // the ui bindings is done here and not at the end of render since they 
     // will not be available until after the model is rendered, but should be
     // available before the collection is rendered.
     this.bindUIElements();
-
     this.triggerMethod("composite:model:rendered");
 
-    this.renderCollection();
+    this._renderChildren();
+
     this.triggerMethod("composite:rendered");
+    this.triggerRendered();
     return this;
   },
 
+  _renderChildren: function(){
+    Marionette.CollectionView.prototype._renderChildren.call(this);
+    this.triggerMethod("composite:collection:rendered");
+  },
+
   // Render the collection for the composite view
   renderCollection: function(){
     var args = Array.prototype.slice.apply(arguments);
     Marionette.CollectionView.prototype.render.apply(this, args);
 
-    this.triggerMethod("composite:collection:rendered");
   },
 
   // Render an individual model, if we have one, as

labs/architecture-examples/backbone_marionette/components/todomvc-common/base.css

+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #eaeaea url('bg.png');
+	color: #4d4d4d;
+	width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#todoapp {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.9);
+	margin: 130px 0 40px 0;
+	border: 1px solid #ccc;
+	position: relative;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+				0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+	content: '';
+	border-left: 1px solid #f5d6d6;
+	border-right: 1px solid #f5d6d6;
+	width: 2px;
+	position: absolute;
+	top: 0;
+	left: 40px;
+	height: 100%;
+}
+
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+}
+
+#todoapp input:-moz-placeholder {
+	font-style: italic;
+	color: #a9a9a9;
+}
+
+#todoapp h1 {
+	position: absolute;
+	top: -120px;
+	width: 100%;
+	font-size: 70px;
+	font-weight: bold;
+	text-align: center;
+	color: #b3b3b3;
+	color: rgba(255, 255, 255, 0.3);
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+#header {
+	padding-top: 15px;
+	border-radius: inherit;
+}
+
+#header:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 15px;
+	z-index: 2;
+	border-bottom: 1px solid #6c615c;
+	background: #8d7d77;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+	border-top-left-radius: 1px;
+	border-top-right-radius: 1px;
+}
+
+#new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+#new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.02);
+	z-index: 2;
+	box-shadow: none;
+}
+
+#main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
+	display: none;
+}
+
+#toggle-all {
+	position: absolute;
+	top: -42px;
+	left: -4px;
+	width: 40px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+	content: '»';
+	font-size: 28px;
+	color: #d9d9d9;
+	padding: 0 25px 7px;
+}
+
+#toggle-all:checked:before {
+	color: #737373;
+}
+
+#todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+#todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px dotted #ccc;
+}
+
+#todo-list li:last-child {
+	border-bottom: none;
+}
+
+#todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+#todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+#todo-list li .toggle:after {
+	content: '✔';
+	line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+	font-size: 20px;
+	color: #d9d9d9;
+	text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+	color: #85ada7;
+	text-shadow: 0 1px 0 #669991;
+	bottom: 1px;
+	position: relative;
+}
+
+#todo-list li label {
+	word-break: break-word;
+	padding: 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	-webkit-transition: color 0.4s;
+	-moz-transition: color 0.4s;
+	-ms-transition: color 0.4s;
+	-o-transition: color 0.4s;
+	transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+	color: #a9a9a9;
+	text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 22px;
+	color: #a88a8a;
+	-webkit-transition: all 0.2s;
+	-moz-transition: all 0.2s;
+	-ms-transition: all 0.2s;
+	-o-transition: all 0.2s;
+	transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+	text-shadow: 0 0 1px #000,
+				 0 0 10px rgba(199, 107, 107, 0.8);
+	-webkit-transform: scale(1.3);
+	-moz-transform: scale(1.3);
+	-ms-transform: scale(1.3);
+	-o-transform: scale(1.3);
+	transform: scale(1.3);
+}
+
+#todo-list li .destroy:after {
+	content: '✖';
+}
+
+#todo-list li:hover .destroy {
+	display: block;
+}
+
+#todo-list li .edit {
+	display: none;
+}
+
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+#footer {
+	color: #777;
+	padding: 0 15px;
+	position: absolute;
+	right: 0;
+	bottom: -31px;
+	left: 0;
+	height: 20px;
+	z-index: 1;
+	text-align: center;
+}
+
+#footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 31px;
+	left: 0;
+	height: 50px;
+	z-index: -1;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+				0 6px 0 -3px rgba(255, 255, 255, 0.8),
+				0 7px 1px -3px rgba(0, 0, 0, 0.3),
+				0 43px 0 -6px rgba(255, 255, 255, 0.8),
+				0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+	float: left;
+	text-align: left;
+}
+
+#filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+#filters li {
+	display: inline;
+}
+
+#filters li a {
+	color: #83756f;
+	margin: 2px;
+	text-decoration: none;
+}
+
+#filters li a.selected {
+	font-weight: bold;
+}
+
+#clear-completed {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	background: rgba(0, 0, 0, 0.1);
+	font-size: 11px;
+	padding: 0 10px;
+	border-radius: 3px;
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#clear-completed:hover {
+	background: rgba(0, 0, 0, 0.15);
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+#info {
+	margin: 65px auto 0;
+	color: #a6a6a6;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+#info a {
+	color: inherit;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	#toggle-all,
+	#todo-list li .toggle {
+		background: none;
+	}
+
+	#todo-list li .toggle {
+		height: 40px;
+	}
+
+	#toggle-all {
+		top: -56px;
+		left: -15px;
+		width: 65px;
+		height: 41px;
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+.hidden{
+	display:none;
+}

labs/architecture-examples/backbone_marionette/components/todomvc-common/base.js

+(function () {
+	'use strict';
+
+	if (location.hostname === 'todomvc.com') {
+		var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+	}
+})();

labs/architecture-examples/backbone_marionette/index.html

@@ -4,11 +4,8 @@
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 		<title>Marionette • TodoMVC</title>
-		<link rel="stylesheet" href="../../../assets/base.css">
+		<link rel="stylesheet" href="components/todomvc-common/base.css">
 		<link rel="stylesheet" href="css/app.css">
-		<!--[if IE]>
-		<script src="../../../assets/ie.js"></script>
-		<![endif]-->
 		<script type="text/html" id="template-footer">
 			<span id="todo-count"><strong></strong><span></span></span>
 			<ul id="filters">
@@ -58,12 +55,12 @@
 			<p>Further variations on the Backbone.Marionette app are also <a href="https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette">available</a>.</p>
 		</footer>
 		<!-- vendor libraries -->
-		<script src="../../../assets/base.js"></script>
-		<script src="../../../assets/jquery.min.js"></script>
-		<script src="../../../assets/lodash.min.js"></script>
-		<script src="js/lib/backbone.js"></script>
-		<script src="js/lib/backbone.localStorage.js"></script>
-		<script src="js/lib/backbone.marionette.js"></script>
+		<script src="components/todomvc-common/base.js"></script>
+		<script src="components/jquery/jquery.js"></script>
+		<script src="components/lodash/lodash.js"></script>
+		<script src="components/backbone/backbone.js"></script>
+		<script src="components/backbone.localStorage/backbone.localStorage.js"></script>
+		<script src="components/backbone.marionette/lib/backbone.marionette.js"></script>
 		<!-- application -->
 		<script src="js/TodoMVC.js"></script>
 		<script src="js/TodoMVC.Todos.js"></script>

labs/architecture-examples/backbone_marionette/js/lib/backbone.localStorage.js

-/**
- * Backbone localStorage Adapter
- * Version 1.1.0
- *
- * https://github.com/jeromegn/Backbone.localStorage
- */
-(function (root, factory) {
-	if (typeof define === "function" && define.amd) {
-		// AMD. Register as an anonymous module.
-		define(["underscore", "backbone"], function (_, Backbone) {
-			// Use global variables if the locals are undefined.
-			return factory(_ || root._, Backbone || root.Backbone);
-		});
-	} else {
-		// RequireJS isn't being used. Assume underscore and backbone are loaded in <script> tags
-		factory(_, Backbone);
-	}
-}(this, function (_, Backbone) {
-	// A simple module to replace `Backbone.sync` with *localStorage*-based
-	// persistence. Models are given GUIDS, and saved into a JSON object. Simple
-	// as that.
-
-	// Hold reference to Underscore.js and Backbone.js in the closure in order
-	// to make things work even if they are removed from the global namespace
-
-	// Generate four random hex digits.
-	function S4() {
-		return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
-	};
-
-	// Generate a pseudo-GUID by concatenating random hexadecimal.
-	function guid() {
-		return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
-	};
-
-	// Our Store is represented by a single JS object in *localStorage*. Create it
-	// with a meaningful name, like the name you'd give a table.
-	// window.Store is deprectated, use Backbone.LocalStorage instead
-	Backbone.LocalStorage = window.Store = function (name) {
-		this.name = name;
-		var store = this.localStorage().getItem(this.name);
-		this.records = (store && store.split(",")) || [];
-	};
-
-	_.extend(Backbone.LocalStorage.prototype, {
-
-		// Save the current state of the **Store** to *localStorage*.
-		save: function () {
-			this.localStorage().setItem(this.name, this.records.join(","));
-		},
-
-		// Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
-		// have an id of it's own.
-		create: function (model) {
-			if (!model.id) {
-				model.id = guid();
-				model.set(model.idAttribute, model.id);
-			}
-			this.localStorage().setItem(this.name + "-" + model.id, JSON.stringify(model));
-			this.records.push(model.id.toString());
-			this.save();
-			return this.find(model);
-		},
-
-		// Update a model by replacing its copy in `this.data`.
-		update: function (model) {
-			this.localStorage().setItem(this.name + "-" + model.id, JSON.stringify(model));
-			if (!_.include(this.records, model.id.toString()))
-				this.records.push(model.id.toString()); this.save();
-			return this.find(model);
-		},
-
-		// Retrieve a model from `this.data` by id.
-		find: function (model) {
-			return this.jsonData(this.localStorage().getItem(this.name + "-" + model.id));
-		},
-
-		// Return the array of all models currently in storage.
-		findAll: function () {
-			return _(this.records).chain()
-			  .map(function (id) {
-			  	return this.jsonData(this.localStorage().getItem(this.name + "-" + id));
-			  }, this)
-			  .compact()
-			  .value();
-		},
-
-		// Delete a model from `this.data`, returning it.
-		destroy: function (model) {
-			if (model.isNew())
-				return false
-			this.localStorage().removeItem(this.name + "-" + model.id);
-			this.records = _.reject(this.records, function (id) {
-				return id === model.id.toString();
-			});
-			this.save();
-			return model;
-		},
-
-		localStorage: function () {
-			return localStorage;
-		},
-
-		// fix for "illegal access" error on Android when JSON.parse is passed null
-		jsonData: function (data) {
-			return data && JSON.parse(data);
-		}
-
-	});
-
-	// localSync delegate to the model or collection's
-	// *localStorage* property, which should be an instance of `Store`.
-	// window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
-	Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function (method, model, options) {
-		var store = model.localStorage || model.collection.localStorage;
-
-		var resp, errorMessage, syncDfd = $.Deferred && $.Deferred(); //If $ is having Deferred - use it. 
-
-		try {
-
-			switch (method) {
-				case "read":
-					resp = model.id != undefined ? store.find(model) : store.findAll();
-					break;
-				case "create":
-					resp = store.create(model);
-					break;
-				case "update":
-					resp = store.update(model);
-					break;
-				case "delete":
-					resp = store.destroy(model);
-					break;
-			}
-
-		} catch (error) {
-			if (error.code === DOMException.QUOTA_EXCEEDED_ERR && window.localStorage.length === 0)
-				errorMessage = "Private browsing is unsupported";
-			else
-				errorMessage = error.message;
-		}
-
-		if (resp) {
-			model.trigger("sync", model, resp, options);
-			if (options && options.success)
-				if (Backbone.VERSION === "0.9.10") {
-					options.success(model, resp, options);
-				} else {
-					options.success(resp);
-				}
-			if (syncDfd)
-				syncDfd.resolve(resp);
-
-		} else {
-			errorMessage = errorMessage ? errorMessage
-										: "Record Not Found";
-
-			model.trigger("error", model, errorMessage, options);
-			if (options && options.error)
-				if (Backbone.VERSION === "0.9.10") {
-					options.error(model, errorMessage, options);
-				} else {
-					options.error(errorMessage);
-				}
-
-			if (syncDfd)
-				syncDfd.reject(errorMessage);
-		}
-
-		// add compatibility with $.ajax
-		// always execute callback for success and error
-		if (options && options.complete) options.complete(resp);
-
-		return syncDfd && syncDfd.promise();
-	};
-
-	Backbone.ajaxSync = Backbone.sync;
-
-	Backbone.getSyncMethod = function (model) {
-		if (model.localStorage || (model.collection && model.collection.localStorage)) {
-			return Backbone.localSync;
-		}
-
-		return Backbone.ajaxSync;
-	};
-
-	// Override 'Backbone.sync' to default to localSync,
-	// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
-	Backbone.sync = function (method, model, options) {
-		return Backbone.getSyncMethod(model).apply(this, [method, model, options]);
-	};
-
-	return Backbone.LocalStorage;
-}));
\ No newline at end of file