Merge branch 'master' into emberjs

bootstrap.css

@@ -228,6 +228,7 @@ body {
 }
 .container-fluid > .content {
   margin-left: 240px;
+  max-width: 800px;
 }
 a {
   color: #0069d6;

index.html

@@ -59,6 +59,7 @@
         <li><a href="http://documentcloud.github.com/backbone/">Backbone.js</a></li>  
         <li><a href="http://spinejs.com/">Spine.js</a></li>
         <li><a href="http://sammyjs.org/">Sammy.js</a></li> 
+        <li><a href="http://kmalakoff.github.com/knockback/">Knockback.js</a></li>
         <li><a href="http://knockoutjs.com/">KnockoutJS</a></li> 
         <li><a href="http://developer.yahoo.com/yui/">YUILibrary</a></li> 
         <li><a href="http://angularjs.org/">AngularJS</a></li> 
@@ -79,23 +80,25 @@
 
           <h5>Live demos</h5>
           <ul>
-<li><a href="todo-example/emberjs/index.html">Ember.js</a></li> 
-<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> 
-<li><a href="todo-example/angularjs/main/index.html">AngularJS</a></li> 
-<li><a href="todo-example/angularjs/persistencejs/index.html">Angular + PersistenceJS</a></li> 
-<li><a href="todo-example/broke/index.html">Broke.js</a></li> 
-<li><a href="todo-example/fidel/index.html">Fidel.js</a></li>
+          <li><a href="todo-example/emberjs/index.html">Ember.js</a></li> 
+          <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/knockback/todos-classic/index.html">Knockback.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> 
+          <li><a href="todo-example/angularjs/main/index.html">AngularJS</a></li> 
+          <li><a href="todo-example/angularjs/persistencejs/index.html">Angular + PersistenceJS</a></li> 
+          <li><a href="todo-example/broke/index.html">Broke.js</a></li> 
+          <li><a href="todo-example/fidel/index.html">Fidel.js</a></li>
           </ul>
 
           <h5>Contributors</h5>
           <ul>
             <li><a href="http://twitter.com/addyosmani">Addy Osmani</a></li> 
+            <li><a href="https://github.com/boushley">Aaron Boushley</a></li>
             <li><a href="http://twitter.com/jeromegn">Jérôme Gravel-Niquet</a></li> 
             <li><a href="http://twitter.com/justinbmeyer">Justin Meyer</a></li> 
             <li><a href="http://twitter.com/macmann">Alex MacCaw</a></li> 
@@ -105,6 +108,7 @@
             <li><a href="http://developer.yahoo.com">The YUI team</a></li> 
             <li><a href="https://github.com/jacobmumm">Jacob Mumm</a></li>
             <li><a href="https://github.com/brokenseal">Davide Callegari</a></li>
+            <li><a href="https://github.com/kmalakoff">Kevin Malakoff</a></li>
           </ul>
 
           <h5>Coming Soon</h5>
@@ -122,12 +126,11 @@
         <div class="hero-unit">
           <h1>TodoMVC</h1>
           <p>A common learning application for popular JavaScript MVC frameworks</p>
-          <p><a class="btn primary large" href="https://github.com/addyosmani/todomvc/zipball/v0.2">Download Version 0.2</a> &nbsp;
+          <p><a class="btn primary large" href="https://github.com/addyosmani/todomvc/zipball/master">Download (latest)</a> &nbsp;
           <a class="btn secondary large" href="http://github.com/addyosmani/todomvc">Follow On GitHub</a></p>
         </div>
 
 
-<div class="row">
     <div class="span12">
       <h3>Screenshots</h3>
       <p>A preview of the Todo apps included in the download:</p>
@@ -191,9 +194,6 @@
             <p><a class="btn" href="https://github.com/addyosmani/todomvc/pull/new/master">Submit Pull Request&raquo;</a></p>
 </div>
 
-
- </div>
-
   </div>
 
 

todo-example/emberjs/js/app.js

@@ -159,14 +159,13 @@ Todos.TodoStore = (function () {
 })();
 
 (function () {
-  var items = Todos.TodoStore.findAll();
 
-  if (items.length < 1)
-  {
-    var todo = Todos.Todo.create({'title': 'First Task'});
-    Todos.TodoStore.create(todo);
-    items = [todo];
+  var items = Todos.TodoStore.findAll();
+  
+  if(items.length > 1){
+    Todos.todosController.set('[]', items);
   }
+  
 
-  Todos.todosController.set('[]', items);
+  
 })();

todo-example/knockback/todos-classic/index.html

+<!DOCTYPE html>
+<html>
+  <!-- Support Localization -->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+  <head>
+    <title>Knockback Demo: Todos</title>
+    <!-- Demo Dependencies -->
+    <script src="../vendor/json2.js"></script>
+    <script src="../vendor/jquery-1.7.min.js"></script>
+    <script src="../vendor/jquery.tmpl.min.js"></script>
+
+    <!-- Knockback Dependencies -->
+    <script src="dependencies/underscore.js"></script>
+    <script src="dependencies/backbone.js"></script>
+    <script src="dependencies/knockout-2.0.0.js"></script>
+    <script src="dependencies/knockback.js"></script>
+
+    <!-- The Demo -->
+    <link href="../css/todos.css" media="all" rel="stylesheet" type="text/css"/>
+    <script src="../vendor/backbone-localstorage.js"></script>
+    <script src="todos_classic.js"></script>
+
+  </head>
+
+  <body>
+
+    <!-- Todo App Interface -->
+    <div id="todoapp">
+
+      <!-- Header Section -->
+      <div id="todo-header">
+        <div class="title">
+          <h1>Todos</h1>
+        </div>
+      </div>
+
+      <!-- Create Todo Section -->
+      <div id="todo-create">
+        <div class="content">
+          <div id="create-todo">
+            <input id="new-todo" type="text" placeholder="What needs to be done?" data-bind="value: create.input_text, event: {keyup: create.addTodo}"/>
+          </div>
+        </div>
+      </div>
+
+      <!-- Todos List Section -->
+      <div id="todo-list">
+        <ul class="todo-list" data-bind="template: {name: 'item-template', foreach: todo_list.todos}"></ul>
+      </div>
+
+      <!-- Stats Section -->
+      <div id="todo-stats">
+        <span class="todo-count" data-bind="text: stats.remaining_text"></span>
+        <span class="todo-clear"> <a href="#" data-bind="text: stats.clear_text, click: stats.onDestroyDone"></a></span>
+      </div>
+
+      <!-- Footer Section -->
+      <div id="todo-footer">
+        <ul id="instructions">
+          <li>Double-click to edit a todo.</li>
+        </ul>
+      </div>
+    </div>
+
+    <div id="credits">
+      Created by
+      <br />
+      <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
+      <br />
+      <br />
+      Modified to use <a href="https://github.com/kmalakoff/knockback">Knockback.js</a> by
+      <br />
+      <a href="https://github.com/kmalakoff">Kevin Malakoff</a>
+      <br />
+      and
+      <br />
+      <a href="https://github.com/yuchi">Pier Paolo Ramon</a>
+    </div>
+
+    <!-- Templates -->
+    <script type="text/x-jquery-tmpl" id="item-template">
+      <li>
+        <div class="todo" data-bind="css: {done: done, editing: edit_mode}">
+          <div class="display">
+            <input class="check" type="checkbox" data-bind="checked: done" />
+            <div class="todo-text" data-bind="text: text, dblclick: toggleEditMode"></div>
+            <div class="todo-destroy" data-bind="click: destroyTodo"></div>
+          </div>
+          <div class="edit">
+            <input class="todo-input" type="text" data-bind="value: text, event: {keyup: onEnterEndEdit}" />
+          </div>
+        </div>
+      </li>
+    </script>
+  </body>
+
+</html>

todo-example/knockback/todos-classic/todos_classic.coffee

+###
+  knockback-todos.js
+  (c) 2011 Kevin Malakoff.
+  Knockback-Todos is freely distributable under the MIT license.
+  See the following for full license details:
+    https:#github.com/kmalakoff/knockback-todos/blob/master/LICENSE
+###
+
+$(document).ready(->
+
+  # add a doubleclick and placeholder handlers to KO
+  ko.bindingHandlers.dblclick =
+    init: (element, value_accessor, all_bindings_accessor, view_model) ->
+      $(element).dblclick(ko.utils.unwrapObservable(value_accessor()))
+
+  ###################################
+  # Model: http://en.wikipedia.org/wiki/Model_view_controller
+  # ORM: http://en.wikipedia.org/wiki/Object-relational_mapping
+  ###################################
+
+  # Todos
+  class TodoList extends Backbone.Collection
+    localStorage: new Store("kb_todos") # Save all of the todo items under the `"kb_todos"` namespace.
+    doneCount: -> @models.reduce(((prev,cur)-> return prev + if !!cur.get('done') then 1 else 0), 0)
+    remainingCount: -> @models.length - @doneCount()
+    allDone: -> return @filter((todo) -> return !!todo.get('done'))
+  todos = new TodoList()
+  todos.fetch()
+
+  ###################################
+  # MVVM: http://en.wikipedia.org/wiki/Model_View_ViewModel
+  ###################################
+
+  CreateTodoViewModel = ->
+    @input_text = ko.observable('')
+    @addTodo = (view_model, event) ->
+      text = @create.input_text()
+      return true if (!text || event.keyCode != 13)
+      todos.create({text: text})
+      @create.input_text('')
+    @
+
+  TodoViewModel = (model) ->
+    @text = kb.observable(model, {key: 'text', write: ((text) -> model.save({text: text}))}, this)
+    @edit_mode = ko.observable(false)
+    @toggleEditMode = (event) => @edit_mode(!@edit_mode()) if not @done()
+    @onEnterEndEdit = (event) => @edit_mode(false) if (event.keyCode == 13)
+
+    @done = kb.observable(model, {key: 'done', write: ((done) -> model.save({done: done})) }, this)
+    @destroyTodo = => model.destroy()
+    @
+
+  TodoListViewModel = (todos) ->
+    @todos = ko.observableArray([])
+    @collection_observable = kb.collectionObservable(todos, @todos, { view_model: TodoViewModel })
+    @
+
+  # Stats Footer
+  StatsViewModel = (todos) ->
+    @collection_observable = kb.collectionObservable(todos)
+    @remaining_text = ko.dependentObservable(=>
+      count = @collection_observable.collection().remainingCount(); return '' if not count
+      return "#{count} #{if count == 1 then 'item' else 'items'} remaining."
+    )
+    @clear_text = ko.dependentObservable(=>
+      count = @collection_observable.collection().doneCount(); return '' if not count
+      return "Clear #{count} completed #{if count == 1 then 'item' else 'items'}."
+    )
+    @onDestroyDone = => model.destroy() for model in todos.allDone()
+    @
+
+  app_view_model =
+    create: new CreateTodoViewModel()
+    todo_list: new TodoListViewModel(todos)
+    stats: new StatsViewModel(todos)
+  ko.applyBindings(app_view_model, $('#todoapp')[0])
+
+  # Destroy when finished with the view model
+  # kb.vmRelease(app_view_model)
+)
\ No newline at end of file

todo-example/knockback/todos-classic/todos_classic.js

+/*
+  knockback-todos.js
+  (c) 2011 Kevin Malakoff.
+  Knockback-Todos is freely distributable under the MIT license.
+  See the following for full license details:
+    https:#github.com/kmalakoff/knockback-todos/blob/master/LICENSE
+*/
+var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
+  for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
+  function ctor() { this.constructor = child; }
+  ctor.prototype = parent.prototype;
+  child.prototype = new ctor;
+  child.__super__ = parent.prototype;
+  return child;
+}, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+$(document).ready(function() {
+  var CreateTodoViewModel, StatsViewModel, TodoList, TodoListViewModel, TodoViewModel, app_view_model, todos;
+  ko.bindingHandlers.dblclick = {
+    init: function(element, value_accessor, all_bindings_accessor, view_model) {
+      return $(element).dblclick(ko.utils.unwrapObservable(value_accessor()));
+    }
+  };
+  TodoList = (function() {
+    __extends(TodoList, Backbone.Collection);
+    function TodoList() {
+      TodoList.__super__.constructor.apply(this, arguments);
+    }
+    TodoList.prototype.localStorage = new Store("kb_todos");
+    TodoList.prototype.doneCount = function() {
+      return this.models.reduce((function(prev, cur) {
+        return prev + (!!cur.get('done') ? 1 : 0);
+      }), 0);
+    };
+    TodoList.prototype.remainingCount = function() {
+      return this.models.length - this.doneCount();
+    };
+    TodoList.prototype.allDone = function() {
+      return this.filter(function(todo) {
+        return !!todo.get('done');
+      });
+    };
+    return TodoList;
+  })();
+  todos = new TodoList();
+  todos.fetch();
+  CreateTodoViewModel = function() {
+    this.input_text = ko.observable('');
+    this.addTodo = function(view_model, event) {
+      var text;
+      text = this.create.input_text();
+      if (!text || event.keyCode !== 13) {
+        return true;
+      }
+      todos.create({
+        text: text
+      });
+      return this.create.input_text('');
+    };
+    return this;
+  };
+  TodoViewModel = function(model) {
+    this.text = kb.observable(model, {
+      key: 'text',
+      write: (function(text) {
+        return model.save({
+          text: text
+        });
+      })
+    }, this);
+    this.edit_mode = ko.observable(false);
+    this.toggleEditMode = __bind(function(event) {
+      if (!this.done()) {
+        return this.edit_mode(!this.edit_mode());
+      }
+    }, this);
+    this.onEnterEndEdit = __bind(function(event) {
+      if (event.keyCode === 13) {
+        return this.edit_mode(false);
+      }
+    }, this);
+    this.done = kb.observable(model, {
+      key: 'done',
+      write: (function(done) {
+        return model.save({
+          done: done
+        });
+      })
+    }, this);
+    this.destroyTodo = __bind(function() {
+      return model.destroy();
+    }, this);
+    return this;
+  };
+  TodoListViewModel = function(todos) {
+    this.todos = ko.observableArray([]);
+    this.collection_observable = kb.collectionObservable(todos, this.todos, {
+      view_model: TodoViewModel
+    });
+    return this;
+  };
+  StatsViewModel = function(todos) {
+    this.collection_observable = kb.collectionObservable(todos);
+    this.remaining_text = ko.dependentObservable(__bind(function() {
+      var count;
+      count = this.collection_observable.collection().remainingCount();
+      if (!count) {
+        return '';
+      }
+      return "" + count + " " + (count === 1 ? 'item' : 'items') + " remaining.";
+    }, this));
+    this.clear_text = ko.dependentObservable(__bind(function() {
+      var count;
+      count = this.collection_observable.collection().doneCount();
+      if (!count) {
+        return '';
+      }
+      return "Clear " + count + " completed " + (count === 1 ? 'item' : 'items') + ".";
+    }, this));
+    this.onDestroyDone = __bind(function() {
+      var model, _i, _len, _ref, _results;
+      _ref = todos.allDone();
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        model = _ref[_i];
+        _results.push(model.destroy());
+      }
+      return _results;
+    }, this);
+    return this;
+  };
+  app_view_model = {
+    create: new CreateTodoViewModel(),
+    todo_list: new TodoListViewModel(todos),
+    stats: new StatsViewModel(todos)
+  };
+  return ko.applyBindings(app_view_model, $('#todoapp')[0]);
+});
\ No newline at end of file

todo-example/knockback/todos-extended/dependencies/optional/backbone-modelref.js

+/*
+  backbone-modelref.js 0.1.0
+  (c) 2011 Kevin Malakoff.
+  Backbone-ModelRef.js is freely distributable under the MIT license.
+  See the following for full license details:
+    https://github.com/kmalakoff/backbone-modelref/blob/master/LICENSE
+  Dependencies: Backbone.js and Underscore.js.
+*/
+var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
+  for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
+  function ctor() { this.constructor = child; }
+  ctor.prototype = parent.prototype;
+  child.prototype = new ctor;
+  child.__super__ = parent.prototype;
+  return child;
+};
+if (!this.Backbone || !this.Backbone.Model) {
+  throw new Error('Backbone.ModelRef: Dependency alert! Backbone.js must be included before this file');
+}
+Backbone.ModelRef = (function() {
+  var MODEL_EVENTS_WHEN_LOADED, MODEL_EVENTS_WHEN_UNLOADED;
+  MODEL_EVENTS_WHEN_LOADED = ['reset', 'remove'];
+  MODEL_EVENTS_WHEN_UNLOADED = ['reset', 'add'];
+  function ModelRef(collection, model_id, cached_model) {
+    var event, _i, _j, _len, _len2;
+    this.collection = collection;
+    this.model_id = model_id;
+    this.cached_model = cached_model != null ? cached_model : null;
+    _.bindAll(this, '_checkForLoad', '_checkForUnload');
+    if (!this.collection) {
+      throw new Error("Backbone.ModelRef: collection is missing");
+    }
+    if (!(this.model_id || this.cached_model)) {
+      throw new Error("Backbone.ModelRef: model_id and cached_model missing");
+    }
+    if (this.collection.retain) {
+      this.collection.retain();
+    }
+    this.cached_model = this.cached_model || this.collection.get(this.model_id);
+    if (this.cached_model) {
+      for (_i = 0, _len = MODEL_EVENTS_WHEN_LOADED.length; _i < _len; _i++) {
+        event = MODEL_EVENTS_WHEN_LOADED[_i];
+        this.collection.bind(event, this._checkForUnload);
+      }
+    } else {
+      for (_j = 0, _len2 = MODEL_EVENTS_WHEN_UNLOADED.length; _j < _len2; _j++) {
+        event = MODEL_EVENTS_WHEN_UNLOADED[_j];
+        this.collection.bind(event, this._checkForLoad);
+      }
+    }
+    this.ref_count = 1;
+  }
+  ModelRef.prototype.retain = function() {
+    this.ref_count++;
+    return this;
+  };
+  ModelRef.prototype.release = function() {
+    var event, _i, _j, _len, _len2;
+    if (this.ref_count <= 0) {
+      throw new Error("Backbone.ModelRef.release(): ref count is corrupt");
+    }
+    this.ref_count--;
+    if (this.ref_count > 0) {
+      return;
+    }
+    if (this.cached_model) {
+      for (_i = 0, _len = MODEL_EVENTS_WHEN_LOADED.length; _i < _len; _i++) {
+        event = MODEL_EVENTS_WHEN_LOADED[_i];
+        this.collection.unbind(event, this._checkForUnload);
+      }
+    } else {
+      for (_j = 0, _len2 = MODEL_EVENTS_WHEN_UNLOADED.length; _j < _len2; _j++) {
+        event = MODEL_EVENTS_WHEN_UNLOADED[_j];
+        this.collection.unbind(event, this._checkForLoad);
+      }
+    }
+    if (this.collection.release) {
+      this.collection.release();
+    }
+    this.collection = null;
+    return this;
+  };
+  ModelRef.prototype.get = function(attribute_name) {
+    if (attribute_name !== 'id') {
+      throw new Error("Backbone.ModelRef.get(): only id is permitted");
+    }
+    if (this.cached_model && !this.cached_model.isNew()) {
+      this.model_id = this.cached_model.id;
+    }
+    return this.model_id;
+  };
+  ModelRef.prototype.getModel = function() {
+    if (this.cached_model && !this.cached_model.isNew()) {
+      this.model_id = this.cached_model.id;
+    }
+    if (this.cached_model) {
+      return this.cached_model;
+    }
+    return this.cached_model = this.collection.get(this.model_id);
+  };
+  ModelRef.prototype.isLoaded = function() {
+    var model;
+    model = this.getModel();
+    if (!model) {
+      return false;
+    }
+    if (model.isLoaded) {
+      return model.isLoaded();
+    } else {
+      return true;
+    }
+  };
+  ModelRef.prototype._checkForLoad = function() {
+    var event, model, _i, _j, _len, _len2;
+    model = this.collection.get(this.model_id);
+    if (!model) {
+      return;
+    }
+    if (this.cached_model) {
+      return;
+    }
+    for (_i = 0, _len = MODEL_EVENTS_WHEN_UNLOADED.length; _i < _len; _i++) {
+      event = MODEL_EVENTS_WHEN_UNLOADED[_i];
+      this.collection.unbind(event, this._checkForLoad);
+    }
+    for (_j = 0, _len2 = MODEL_EVENTS_WHEN_LOADED.length; _j < _len2; _j++) {
+      event = MODEL_EVENTS_WHEN_LOADED[_j];
+      this.collection.bind(event, this._checkForUnload);
+    }
+    this.cached_model = model;
+    return this.trigger('loaded', this.cached_model);
+  };
+  ModelRef.prototype._checkForUnload = function() {
+    var event, model, _i, _j, _len, _len2;
+    model = this.collection.get(this.model_id);
+    if (model) {
+      return;
+    }
+    if (!this.cached_model) {
+      return;
+    }
+    for (_i = 0, _len = MODEL_EVENTS_WHEN_LOADED.length; _i < _len; _i++) {
+      event = MODEL_EVENTS_WHEN_LOADED[_i];
+      this.collection.unbind(event, this._checkForUnload);
+    }
+    for (_j = 0, _len2 = MODEL_EVENTS_WHEN_UNLOADED.length; _j < _len2; _j++) {
+      event = MODEL_EVENTS_WHEN_UNLOADED[_j];
+      this.collection.bind(event, this._checkForLoad);
+    }
+    model = this.cached_model;
+    this.cached_model = null;
+    return this.trigger('unloaded', model);
+  };
+  return ModelRef;
+})();
+Backbone.ModelRef.VERSION = '0.1.0';
+__extends(Backbone.ModelRef.prototype, Backbone.Events);
\ No newline at end of file

todo-example/knockback/todos-extended/index.html

+<!DOCTYPE html>
+<html>
+  <!-- Support Localization -->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+  <head>
+    <title>Knockback Demo: Todos</title>
+    <!-- Demo Dependencies -->
+    <script src="../vendor/json2.js"></script>
+    <script src="../vendor/jquery-1.7.min.js"></script>
+    <script src="../vendor/jquery.tmpl.min.js"></script>
+    <script src="../vendor/globalize/globalize.js"></script>
+    <script src="../vendor/globalize/globalize.culture.fr-FR.js"></script>
+    <script src="../vendor/globalize/globalize.culture.it-IT.js"></script>
+    <script src="../vendor/mColorPicker.min.js"></script>
+    <script type="text/javascript">
+      $.fn.mColorPicker.init.showLogo = false;
+      $.fn.mColorPicker.init.replace = false;
+    </script>
+
+    <!-- Knockback Dependencies -->
+    <script src="dependencies/underscore.js"></script>
+    <script src="dependencies/backbone.js"></script>
+    <script src="dependencies/optional/backbone-modelref.js"></script>
+    <script src="dependencies/knockout-2.0.0.js"></script>
+    <script src="dependencies/knockback.js"></script>
+
+    <!-- Demo Dependencies -->
+    <script src="../vendor/backbone-localstorage.js"></script>
+
+    <!-- The Demo -->
+    <link href="../css/todos.css" media="all" rel="stylesheet" type="text/css"/>
+    <script src="todos_locale_manager.js"></script>
+    <script src="todos_extended.js"></script>
+
+  </head>
+
+  <body>
+
+    <!-- Todo App Interface -->
+    <div id="todoapp">
+
+      <!-- Header and Settings Section -->
+      <div id="todo-header">
+        <div class="title"><h1>Todos</h1></div>
+        <div id="color-settings" data-bind="template: {name: 'priority-setting-template', foreach: window.settings_view_model.priority_settings}"></div>
+      </div>
+
+      <!-- Create Todo Section -->
+      <div id="todo-create">
+        <div class="content">
+          <div id="create-todo">
+            <input id="new-todo" type="text" data-bind="value: create.input_text, placeholder: create.input_placeholder_text, event: {keyup: create.addTodo}"/>
+            <span class="ui-tooltip-top" style="display:none;" data-bind="text: create.input_tooltip_text"></span>
+            <div data-bind="template: {name: 'priority-swatch-picker-template', data: create}"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Todos List Section -->
+      <div id="todo-list">
+        <div class="todo-list-sorting-wrapper-outer" data-bind="visible: todo_list.sort_visible">
+          <div class="todo-list-sorting-wrapper-inner">
+            <div id="todo-list-sorting" class="selection codestyle" data-bind="template: {name: 'option-template', foreach: todo_list.sorting_options, templateOptions: {selected_value: todo_list.selected_value} }"></div>
+          </div>
+        </div>
+        <ul class="todo-list" data-bind="template: {name: 'item-template', foreach: todo_list.todos}"></ul>
+      </div>
+
+      <!-- Stats Section -->
+      <div id="todo-stats">
+        <span class="todo-count" data-bind="text: stats.remaining_text"></span>
+        <span class="todo-clear"> <a href="#" data-bind="text: stats.clear_text, click: stats.onDestroyDone"></a></span>
+      </div>
+
+      <!-- Footer Section -->
+      <div id="todo-footer">
+        <ul id="instructions">
+          <li data-bind="text: footer.instructions_text"></li>
+        </ul>
+        <div id="todo-languages" class="selection codestyle" data-bind="template: {name: 'option-template', foreach: footer.language_options, templateOptions: {selected_value: footer.selected_value} }"></div>
+      </div>
+    </div>
+
+    <div id="credits">
+      Created by
+      <br />
+      <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
+      <br />
+      <br />
+      Modified to use <a href="https://github.com/kmalakoff/knockback">Knockback.js</a> by
+      <br />
+      <a href="https://github.com/kmalakoff">Kevin Malakoff</a>
+      <br />
+      and
+      <br />
+      <a href="https://github.com/yuchi">Pier Paolo Ramon</a>
+    </div>
+
+    <!-- Templates -->
+    <script type="text/x-jquery-tmpl" id="item-template">
+      <li>
+        <div class="todo" data-bind="css: {done: done, done_enhanced: done, editing: edit_mode}">
+          <div class="display">
+            <input class="check" type="checkbox" data-bind="checked: done" />
+            <div data-bind="template: {name: 'priority-swatch-picker-template', data: $data}"></div>
+            <div class="todo-text" data-bind="text: text, dblclick: toggleEditMode"></div>
+            <div class="todo-done-text" data-bind="text: done_text"></div>
+            <div class="todo-destroy" data-bind="click: destroyTodo"></div>
+          </div>
+          <div class="edit">
+            <input class="todo-input" type="text" data-bind="value: text, event: {keyup: onEnterEndEdit}" />
+          </div>
+        </div>
+      </li>
+    </script>
+
+    <script type="text/x-jquery-tmpl" id="priority-setting-template">
+      <div class="priority-color-entry">
+        <div class="priority-text" data-bind="text: priority_text"></div>
+        <input data-bind="attr: {id: priority}, value: priority_color" class='priority-color-swatch colorpicker' data-text="hidden" data-hex="true"/>
+      </div>
+    </script>
+
+    <script type="text/x-jquery-tmpl" id="priority-swatch-picker-template">
+      <div class="priority-color-swatch todo create" data-bind="style: {background: priority_color}, click: onToggleTooltip">
+        <span class="priority-picker-tooltip ui-tooltip-top" data-bind="visible: tooltip_visible">
+          <div data-bind="template: {name: 'priority-picker-template', foreach: window.settings_view_model.priority_settings, templateOptions: {onSelectPriority: onSelectPriority} }"></div>
+        </span>
+      </div>
+    </script>
+
+    <script type="text/x-jquery-tmpl" id="priority-picker-template">
+      <div class="priority-color-entry">
+        <div class="priority-text" data-bind="text: priority_text"></div>
+        <div class='priority-color-swatch' data-bind="style: {background: priority_color}, click: $item.onSelectPriority"></div>
+      </div>
+    </script>
+
+    <script type="text/x-jquery-tmpl" id="option-template">
+      <div class="option"><input type="radio" data-bind="attr: {id: id, name: option_group}, value: id, checked: $item.selected_value"><label data-bind="attr: {for: id}, text: label"></label></div>
+    </script>
+
+  </body>
+
+</html>