Merge pull request #43 from boushley/backboneRequire

Fix up Backbone.js with RequireJS

index.html

@@ -83,6 +83,7 @@
 <li><a href="todo-example/javascriptmvc/todo/todo/index.html">JavaScriptMVC</a></li> 
 <li><a href="todo-example/spine/index.html">Spine.js</a></li>
 <li><a href="todo-example/backbone/index.html">Backbone.js</a></li>  
+<li><a href="todo-example/backbone_require/index.html">Backbone.js + RequireJS</a></li>  
 <li><a href="todo-example/sammyjs/index.html">Sammy.js</a></li> 
 <li><a href="todo-example/knockoutjs/index.html">KnockoutJS (MVVM)</a></li> 
 <li><a href="todo-example/yuilibrary/index.html">YUILibrary</a></li> 
@@ -204,4 +205,4 @@
     </div>
 
   </body>
-</html>
\ No newline at end of file
+</html>

todo-example/backbone+require/css/todos.css → todo-example/backbone_require/css/todos.css

@@ -364,7 +364,6 @@ body {
 	width: 170px;
 	left: 50%;
 	margin-left: -85px;
-	opacity: 0;
 }
 /* line 55 */
 #todoapp .content ul#todo-list {

todo-example/backbone+require/index.html → todo-example/backbone_require/index.html

@@ -22,6 +22,8 @@
         </div>
 
         <div id="todos">
+          <input class="check mark-all-done" type="checkbox"/>
+          <label for="check-all">Mark all as complete</label>
           <ul id="todo-list"></ul>
         </div>
 

todo-example/backbone+require/js/models/todo.js → todo-example/backbone_require/js/models/todo.js

@@ -19,10 +19,9 @@ define(['underscore', 'backbone'], function(_, Backbone) {
       this.save({done: !this.get("done")});
     },
 
-    // Remove this Todo from *localStorage* and delete its view.
+    // Remove this Todo from *localStorage*.
     clear: function() {
       this.destroy();
-      this.view.remove();
     }
 
   });

todo-example/backbone+require/js/templates/todos.html → todo-example/backbone_require/js/templates/todos.html

       <div class="todo <%= done ? 'done' : '' %>">
         <div class="display">
           <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
-          <div class="todo-content"></div>
+          <div class="todo-content"><%= content %></div>
           <span class="todo-destroy"></span>
         </div>
         <div class="edit">
-          <input class="todo-input" type="text" value="" />
+          <input class="todo-input" type="text" value="<%= content %>" />
         </div>
       </div>

todo-example/backbone+require/js/views/app.js → todo-example/backbone_require/js/views/app.js

@@ -19,16 +19,18 @@ define([
     events: {
       "keypress #new-todo":  "createOnEnter",
       "keyup #new-todo":     "showTooltip",
-      "click .todo-clear a": "clearCompleted"
+      "click .todo-clear a": "clearCompleted",
+      "click .mark-all-done": "toggleAllComplete"
     },
 
     // At initialization we bind to the relevant events on the `Todos`
     // collection, when items are added or changed. Kick things off by
     // loading any preexisting todos that might be saved in *localStorage*.
     initialize: function() {
-      _.bindAll(this, 'addOne', 'addAll', 'render');
+      _.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
 
       this.input    = this.$("#new-todo");
+      this.allCheckbox = this.$(".mark-all-done")[0];
 
       Todos.bind('add',     this.addOne);
       Todos.bind('reset',   this.addAll);
@@ -41,11 +43,15 @@ define([
     // of the app doesn't change.
     render: function() {
       var done = Todos.done().length;
+      var remaining = Todos.remaining().length;
+
       this.$('#todo-stats').html(this.statsTemplate({
         total:      Todos.length,
-        done:       Todos.done().length,
-        remaining:  Todos.remaining().length
+        done:       done,
+        remaining:  remaining
       }));
+
+      this.allCheckbox.checked = !remaining;
     },
 
     // Add a single todo item to the list by creating a view for it, and
@@ -93,6 +99,12 @@ define([
       if (val == '' || val == this.input.attr('placeholder')) return;
       var show = function(){ tooltip.show().fadeIn(); };
       this.tooltipTimeout = _.delay(show, 1000);
+    },
+
+    // Change each todo so that it's `done` state matches the check all
+    toggleAllComplete: function () {
+      var done = this.allCheckbox.checked;
+      Todos.each(function (todo) { todo.save({'done': done}); });
     }
 
   });

todo-example/backbone+require/js/views/todos.js → todo-example/backbone_require/js/views/todos.js

@@ -17,33 +17,24 @@ define([
       "click .check"              : "toggleDone",
       "dblclick div.todo-content" : "edit",
       "click span.todo-destroy"   : "clear",
-      "keypress .todo-input"      : "updateOnEnter"
+      "keypress .todo-input"      : "updateOnEnter",
+      "blur .todo-input"          : "close"
     },
 
     // The TodoView listens for changes to its model, re-rendering. Since there's
     // a one-to-one correspondence between a **Todo** and a **TodoView** in this
     // app, we set a direct reference on the model for convenience.
     initialize: function() {
-      _.bindAll(this, 'render', 'close');
+      _.bindAll(this, 'render', 'close', 'remove');
       this.model.bind('change', this.render);
-      this.model.view = this;
+      this.model.bind('destroy', this.remove);
     },
 
     // Re-render the contents of the todo item.
     render: function() {
       $(this.el).html(this.template(this.model.toJSON()));
-      this.setContent();
-      return this;
-    },
-
-    // To avoid XSS (not that it would be harmful in this particular app),
-    // we use `jQuery.text` to set the contents of the todo item.
-    setContent: function() {
-      var content = this.model.get('content');
-      this.$('.todo-content').text(content);
       this.input = this.$('.todo-input');
-      this.input.bind('blur', this.close);
-      this.input.val(content);
+      return this;
     },
 
     // Toggle the `"done"` state of the model.
@@ -68,11 +59,6 @@ define([
       if (e.keyCode == 13) this.close();
     },
 
-    // Remove this view from the DOM.
-    remove: function() {
-      $(this.el).remove();
-    },
-
     // Remove the item, destroy the model.
     clear: function() {
       this.model.clear();