<repo_name>pvhee/todo<file_sep>/todos.js
// An example Backbone application contributed by
// [<NAME>](http://jgn.me/). This demo uses a simple
// [LocalStorage adapter](backbone-localstorage.html)
// to persist Backbone models within your browser.

// Load the application once the DOM is ready, using `jQuery.ready`:
$(function(){

  // Todo Model
  // ----------

  // Our basic **Todo** model has `title`, `order`, and `done` attributes.
  var Todo = Backbone.Model.extend({

    // Default attributes for the todo item.
    defaults: function() {
      return {
        title: "empty todo...",
        order: Todos.nextOrder(),
        done: false
      };
    },

    // Ensure that each todo created has `title`.
    initialize: function() {
      if (!this.get("title")) {
        this.set({"title": this.defaults().title});
      }
      
      // add some listeners to test out stuff
      this.bind("change:done", function() {
        console.log("changed done to " + this.get("done") + " for model " + this.get("title"));
      })
    },

    // Toggle the `done` state of this todo item.
    toggle: function() {
      this.save({done: !this.get("done")});
    },

    // Remove this Todo from *localStorage* and delete its view.
    clear: function() {
      this.destroy();
    }

  });

  // Todo Collection
  // ---------------

  // The collection of todos is backed by *localStorage* instead of a remote
  // server.
  // @todo use node.js and socket.io to share todo lists via the server
  // tutorial: http://developer.teradata.com/blog/jasonstrimpel/2011/11/backbone-js-and-socket-io
  // To understand the functionality below, you need to know the functions provided by 
  // Underscore JS, http://underscorejs.org/, a utility-belt library for JS 
  var TodoList = Backbone.Collection.extend({

    // Reference to this collection's model.
    model: Todo,

    // Save all of the todo items under the `"todos"` namespace.
    // localStorage: new Store("todos-backbone"),

    // Filter down the list of all todo items that are finished.
    // this.filter is by backbone.js adapted to this collection. We pass in a function
    // that gets the model in as argument and does a truth test for it to be included
    // in the final array returned by 'done'.
    done: function() {
      return this.filter(function(todo){ return todo.get('done'); });
    },

    // Filter down the list to only todo items that are still not finished.
    remaining: function() {
      // We are using the "apply invocation pattern" (functions can have methods, since they are objects in JS)
      // apply takes to arguments: the value of "this" and an array of arguments.
      // See http://stackoverflow.com/questions/9137398/backbone-js-todo-collection-what-exactly-is-happening-in-this-return-stateme
      return this.without.apply(this, this.done());
      // No idea really why this cannot work, it will have the proper this scope this AFAIK.      
      // return this.without(this.done());
    },

    // We keep the Todos in sequential order, despite being saved by unordered
    // GUID in the database. This generates the next order number for new items.
    nextOrder: function() {
      if (!this.length) return 1;
      return this.last().get('order') + 1;
    },

    // Todos are sorted by their original insertion order.
    // This will be called by the Collection everytime an item is added or removed.
    comparator: function(todo) {
      return todo.get('order');
    }

  });

  // Create our global collection of **Todos**.
  var Todos = new TodoList;

  // Todo Item View
  // --------------

  // The DOM element for a todo item...
  var TodoView = Backbone.View.extend({

    //... is a list tag.
    // so the View is working with the <li> HTML element
    tagName:  "li",

    // Cache the template function for a single item.
    // The #item-template refers to the template defined within the HTML
    // as '<script type="text/template" id="item-template">'
    template: _.template($('#item-template').html()),

    // The DOM events specific to an item.
    // Delegates this jQuery events to methods provided by this View
    events: {
      // when the event click is triggered on the element with class .toggle, launch toggleDone
      "click .toggle"   : "toggleDone",
      "dblclick .view"  : "edit",
      "click a.destroy" : "clear",
      "keypress .edit"  : "updateOnEnter",
      "blur .edit"      : "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() {
      this.model.bind('change', this.render, this);
      this.model.bind('destroy', this.remove, this);
    },

    // Re-render the titles of the todo item.
    render: function() {
      // we turn the model into a JSON object and pass it on to the templating engine
      this.$el.html(this.template(this.model.toJSON()));
      // use jQuery's toggleClass to add/remove the 'done' class to this <li>
      this.$el.toggleClass('done', this.model.get('done'));
      this.input = this.$('.edit');
      return this;
    },

    // Toggle the `"done"` state of the model.
    toggleDone: function() {
      this.model.toggle();
    },

    // Switch this view into `"editing"` mode, displaying the input field.
    edit: function() {
      this.$el.addClass("editing");
      this.input.focus();
    },

    // Close the `"editing"` mode, saving changes to the todo.
    close: function() {
      var value = this.input.val();
      if (!value) this.clear();
      this.model.save({title: value});
      this.$el.removeClass("editing");
    },

    // If you hit `enter`, we're through editing the item.
    updateOnEnter: function(e) {
      if (e.keyCode == 13) this.close();
      
      // this is space, don't allow them
      // if (e.keyCode == 32) this.close();
    },

    // Remove the item, destroy the model.
    clear: function() {
      this.model.clear();
    }

  });

  // The Application
  // ---------------

  // Our overall **AppView** is the top-level piece of UI.
  var AppView = Backbone.View.extend({

    // Instead of generating a new element, bind to the existing skeleton of
    // the App already present in the HTML.
    el: $("#todoapp"),

    // Our template for the line of statistics at the bottom of the app.
    statsTemplate: _.template($('#stats-template').html()),

    // Delegated events for creating new items, and clearing completed ones.
    events: {
      "keypress #new-todo":  "createOnEnter",
      "click #clear-completed": "clearCompleted",
      "click #toggle-all": "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() {

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

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

      this.footer = this.$('footer');
      this.main = $('#main');

      Todos.fetch();
    },

    // Re-rendering the App just means refreshing the statistics -- the rest
    // of the app doesn't change.
    render: function() {
      var done = Todos.done().length;
      var remaining = Todos.remaining().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;
    },

    // Add a single todo item to the list by creating a view for it, and
    // appending its element to the `<ul>`.
    addOne: function(todo) {
      var view = new TodoView({model: todo});
      this.$("#todo-list").append(view.render().el);
    },

    // Add all items in the **Todos** collection at once.
    addAll: function() {
      Todos.each(this.addOne);
    },

    // If you hit return in the main input field, create new **Todo** model,
    // persisting it to *localStorage*.
    createOnEnter: function(e) {
      if (e.keyCode != 13) return;
      if (!this.input.val()) return;

      Todos.create({title: this.input.val()});
      this.input.val('');
    },

    // Clear all done todo items, destroying their models.
    clearCompleted: function() {
      _.each(Todos.done(), function(todo){ todo.clear(); });
      return false;
    },

    toggleAllComplete: function () {
      var done = this.allCheckbox.checked;
      Todos.each(function (todo) { todo.save({'done': done}); });
    }

  });
  
  
  // Override backbone's syncing method to provide interaction with a back-end
  // via http://developer.teradata.com/blog/jasonstrimpel/2011/11/backbone-js-and-socket-io
  // -------------------------------------------------------------------------
  
  Backbone.sync = function (method, model, options) {
    // console.log('we are syncing!');
    console.log(method);
    // console.log(model);
    // console.log(options);
    
    
      var socket = window.socket; // grab active socket from global namespace; io.connect() was used to create socket
      // console.log(window.socket);
      

      /*
       * Create signature object that will emitted to server with every request. 
       * This is used on the server to push an event back to the client listener.
       */
      var signature = function () {
          var sig = {};    

          sig.endPoint = model.url + (model.id ? ('/' + model.id) : '');
          if (model.ctx) sig.ctx = model.ctx;

          return sig;
      };

      /*
       * Create an event listener for server push. The server notifies
       * the client upon success of CRUD operation.
       */
      var event = function (operation, sig) {
          var e = operation + ':'; 
          e += sig.endPoint;
          if (sig.ctx) e += (':' + sig.ctx);

          return e;
      };

      // Save a new model to the server.
      var create = function () {  
          var sign = signature(model); 
          var e = event('create', sign);
          
          console.log(model.attributes);
          
          socket.emit('create', {'signature' : sign, item : model.attributes }); 
          socket.once(e, function (data) {
              model.id = data.id;  
              console.log(model);                     
          });                           
      };              

      // Get a collection or model from the server.
      var read = function () {
        
          var sign = signature(model);
          
          // console.log(model);
          
          
          var e = event('read', sign);
          socket.emit('read', {'signature' : sign});  
          socket.once(e, function (data) {
              options.success(data); // updates collection, model; fetch                      
          });   
          
          
          
      }; 

      // Save an existing model to the server.
      var update = function () {
          var sign = signature(model); 
          var e = event('update', sign);
          socket.emit('update', {'signature' : sign, item : model.attributes }); // model.attribues is the model data
          socket.once(e, function (data) { 
              console.log(data);                     
          });                           
      };  

      // Delete a model on the server.
      var destroy = function () {
          var sign = signature(model); 
          var e = event('delete', sign);
          socket.emit('delete', {'signature' : sign, item : model.attributes }); // model.attribues is the model data
          socket.once(e, function (data) { 
              console.log(data);                     
          });                           
      };             

      // entry point for method
      switch (method) {
          case 'create':
              create();
              break;        
          case 'read':  
              read(); 
              break;  
          case 'update':
              update();
              break;
          case 'delete':
              destroy();
              break; 
      }        
  };
  
  

  // Finally, we kick things off by creating the **App**.
  var App = new AppView;

});
<file_sep>/README.md
Based on the TODO backbone.js demo by [<NAME>](http://jgn.me). 

## Extensions (in progress):
* Integration with node.js and socket.io to replace HTML localStorage 

## Author
[@pvhee](http://twitter.com/pvhee)