Updated backbone implementation.

Updated backbone to 0.5.3 and jquery to 1.7.1. Updated application to follow the new tempalte.

Updated backbone implementation.
Updated backbone to 0.5.3 and jquery to 1.7.1. Updated application to follow the new tempalte.
542f2c21 · Aaron Boushley · a9468fbc · 542f2c21 · 542f2c21 · 542f2c21
Commit 542f2c21 authored Jan 18, 2012 by Aaron Boushley
10 changed files
--- a/architecture-examples/backbone/css/todos.css
+++ b/architecture-examples/backbone/css/todos.css
--- a/architecture-examples/backbone/index.html
+++ b/architecture-examples/backbone/index.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="utf-8">
    <title>Backbone.js</title>
-    <link rel="stylesheet" href="css/todos.css"/>
+    <link rel="stylesheet" href="css/app.css"/>
 </head>
 <body>
    <div id="todoapp">
@@ -34,33 +34,29 @@
        <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>. <br />Cleanup, edits: <a href="http://addyosmani.com">Addy Osmani</a>.
    </div>

-    <script src="js/json2.js"></script>
-    <script src="js/jquery-1.6.4.min.js"></script>
-    <script src="js/underscore-1.1.6.js"></script>
-    <script src="js/backbone.js"></script>
-    <script src="js/backbone-localstorage.js"></script>
-    <script src="js/todos.js"></script>
+    <script src="js/libs/json2.js"></script>
+    <script src="js/libs/jquery-1.7.1.min.js"></script>
+    <script src="js/libs/underscore-1.1.6.js"></script>
+    <script src="js/libs/backbone.js"></script>
+    <script src="js/libs/backbone-localstorage.js"></script>
+    <script src="js/app.js"></script>

    <!-- Templates -->

    <script type="text/template" id="item-template">
-        <li class="todo <%= done ? 'done' : '' %>">
        <div class="view">
            <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
            <label><%= content %></label>
-                <a class="destroy"></span>
+            <a class="destroy"></a>
        </div>
        <input class="edit" type="text" value="<%= content %>" />
-        </li>
    </script>

    <script type="text/template" id="stats-template">
        <% if (done) { %>
            <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
        <% } %>
-        <% if (total) { %>
        <div class="todo-count"><%= remaining %> <%= remaining == 1 ? 'item' : 'items' %> left.</div>
-        <% } %>
    </script>

 </body>

--- a/architecture-examples/backbone/js/todos.js
+++ b/architecture-examples/backbone/js/todos.js
@@ -91,11 +91,11 @@ $(function(){

    // The DOM events specific to an item.
    events: {
-      "click .check"              : "toggleDone",
-      "dblclick div.todo-content" : "edit",
-      "click span.todo-destroy"   : "clear",
-      "keypress .todo-input"      : "updateOnEnter",
-      "blur .todo-input"          : "close"
+      "click .toggle"   : "toggleDone",
+      "dblclick label"  : "edit",
+      "click a.destroy" : "clear",
+      "keypress .edit"  : "updateOnEnter",
+      "blur .edit"      : "close"
    },

    // The TodoView listens for changes to its model, re-rendering. Since there's
@@ -109,8 +109,11 @@ $(function(){

    // Re-render the contents of the todo item.
    render: function() {
-      $(this.el).html(this.template(this.model.toJSON()));
-      this.input = this.$('.todo-input');
+      var $el = $(this.el);
+      $el.html(this.template(this.model.toJSON()));
+      $el.toggleClass('done', this.model.get('done'));
+
+      this.input = this.$('.edit');
      return this;
    },

@@ -160,8 +163,8 @@ $(function(){
    events: {
      "keypress #new-todo":  "createOnEnter",
      "keyup #new-todo":     "showTooltip",
-      "click .todo-clear a": "clearCompleted",
-      "click .mark-all-done": "toggleAllComplete"
+      "click #clear-completed": "clearCompleted",
+      "click #toggle-all": "toggleAllComplete"
    },

    // At initialization we bind to the relevant events on the `Todos`
@@ -171,12 +174,15 @@ $(function(){
      _.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');

      this.input = this.$("#new-todo");
-      this.allCheckbox = this.$(".mark-all-done")[0];
+      this.allCheckbox = this.$("#toggle-all")[0];

      Todos.bind('add',     this.addOne);
      Todos.bind('reset',   this.addAll);
      Todos.bind('all',     this.render);

+      this.$footer = this.$('footer');
+      this.$main = $('#main');
+
      Todos.fetch();
    },

@@ -186,11 +192,18 @@ $(function(){
      var done = Todos.done().length;
      var remaining = Todos.remaining().length;

-      this.$('#todo-stats').html(this.statsTemplate({
-        total:      Todos.length,
+      if (Todos.length) {
+          this.$main.show();
+          this.$footer.show();
+
+          this.$footer.html(this.statsTemplate({
            done:       done,
            remaining:  remaining
          }));
+      } else {
+          this.$main.hide();
+          this.$footer.hide();
+      }

      this.allCheckbox.checked = !remaining;
    },

--- a/architecture-examples/backbone/js/jquery-1.6.4.min.js
+++ b/architecture-examples/backbone/js/jquery-1.6.4.min.js
--- a/architecture-examples/backbone/js/backbone-localstorage.js
+++ b/architecture-examples/backbone/js/backbone-localstorage.js
--- a/architecture-examples/backbone/js/backbone.js
+++ b/architecture-examples/backbone/js/backbone.js
--- a/architecture-examples/backbone/js/libs/jquery-1.7.1.min.js
+++ b/architecture-examples/backbone/js/libs/jquery-1.7.1.min.js
--- a/architecture-examples/backbone/js/jslitmus.js
+++ b/architecture-examples/backbone/js/jslitmus.js
--- a/architecture-examples/backbone/js/json2.js
+++ b/architecture-examples/backbone/js/json2.js
--- a/architecture-examples/backbone/js/underscore-1.1.6.js
+++ b/architecture-examples/backbone/js/underscore-1.1.6.js