Use socketio for syncing task changes across clients

public/javascripts/app.js

@@ -2,13 +2,5 @@ var app = app || {};
 var ENTER_KEY = 13;
 
 $(function(){
-
-  var tasks = [
-    {content: 'helloworld'},
-    {content: 'wtf'},
-    {content: 'rotterdam'},
-    {content: 'hahahah'}
-  ];
-
-  new app.ListView(tasks);
+  new app.ListView();
 });

public/javascripts/collections/list.js

@@ -4,7 +4,8 @@ var app = app || {};
 
   app.List = Backbone.Collection.extend({
 
-    model: app.Task
+    model: app.Task,
+    url: '/tasks'
     
   });
 

public/javascripts/models/task.js

@@ -9,8 +9,6 @@ var app = app || {};
       content: ''
     },
 
-    url: '/task'
-    
   });
 
 }());

public/javascripts/vendor/socket.io.min.js

@@ -0,0 +1,2 @@
+/*! Socket.IO.min.js build:0.9.11, production. Copyright(c) 2011 LearnBoost <dev@learnboost.com> MIT Licensed */
+var io="undefined"==typeof module?{}:module.exports;(function(){(function(a,b){var c=a;c.version="0.9.11",c.protocol=1,c.transports=[],c.j=[],c.sockets={},c.connect=function(a,d){var e=c.util.parseUri(a),f,g;b&&b.location&&(e.protocol=e.protocol||b.location.protocol.slice(0,-1),e.host=e.host||(b.document?b.document.domain:b.location.hostname),e.port=e.port||b.location.port),f=c.util.uniqueUri(e);var h={host:e.host,secure:"https"==e.protocol,port:e.port||("https"==e.protocol?443:80),query:e.query||""};c.util.merge(h,d);if(h["force new connection"]||!c.sockets[f])g=new c.Socket(h);return!h["force new connection"]&&g&&(c.sockets[f]=g),g=g||c.sockets[f],g.of(e.path.length>1?e.path:"")}})("object"==typeof module?module.exports:this.io={},this),function(a,b){var c=a.util={},d=/^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/,e=["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"];c.parseUri=function(a){var b=d.exec(a||""),c={},f=14;while(f--)c[e[f]]=b[f]||"";return c},c.uniqueUri=function(a){var c=a.protocol,d=a.host,e=a.port;return"document"in b?(d=d||document.domain,e=e||(c=="https"&&document.location.protocol!=="https:"?443:document.location.port)):(d=d||"localhost",!e&&c=="https"&&(e=443)),(c||"http")+"://"+d+":"+(e||80)},c.query=function(a,b){var d=c.chunkQuery(a||""),e=[];c.merge(d,c.chunkQuery(b||""));for(var f in d)d.hasOwnProperty(f)&&e.push(f+"="+d[f]);return e.length?"?"+e.join("&"):""},c.chunkQuery=function(a){var b={},c=a.split("&"),d=0,e=c.length,f;for(;d<e;++d)f=c[d].split("="),f[0]&&(b[f[0]]=f[1]);return b};var f=!1;c.load=function(a){if("document"in b&&document.readyState==="complete"||f)return a();c.on(b,"load",a,!1)},c.on=function(a,b,c,d){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener&&a.addEventListener(b,c,d)},c.request=function(a){if(a&&"undefined"!=typeof XDomainRequest&&!c.ua.hasCORS)return new XDomainRequest;if("undefined"!=typeof XMLHttpRequest&&(!a||c.ua.hasCORS))return new XMLHttpRequest;if(!a)try{return new(window[["Active"].concat("Object").join("X")])("Microsoft.XMLHTTP")}catch(b){}return null},"undefined"!=typeof window&&c.load(function(){f=!0}),c.defer=function(a){if(!c.ua.webkit||"undefined"!=typeof importScripts)return a();c.load(function(){setTimeout(a,100)})},c.merge=function(b,d,e,f){var g=f||[],h=typeof e=="undefined"?2:e,i;for(i in d)d.hasOwnProperty(i)&&c.indexOf(g,i)<0&&(typeof b[i]!="object"||!h?(b[i]=d[i],g.push(d[i])):c.merge(b[i],d[i],h-1,g));return b},c.mixin=function(a,b){c.merge(a.prototype,b.prototype)},c.inherit=function(a,b){function c(){}c.prototype=b.prototype,a.prototype=new c},c.isArray=Array.isArray||function(a){return Object.prototype.toString.call(a)==="[object Array]"},c.intersect=function(a,b){var d=[],e=a.length>b.length?a:b,f=a.length>b.length?b:a;for(var g=0,h=f.length;g<h;g++)~c.indexOf(e,f[g])&&d.push(f[g]);return d},c.indexOf=function(a,b,c){for(var d=a.length,c=c<0?c+d<0?0:c+d:c||0;c<d&&a[c]!==b;c++);return d<=c?-1:c},c.toArray=function(a){var b=[];for(var c=0,d=a.length;c<d;c++)b.push(a[c]);return b},c.ua={},c.ua.hasCORS="undefined"!=typeof XMLHttpRequest&&function(){try{var a=new XMLHttpRequest}catch(b){return!1}return a.withCredentials!=undefined}(),c.ua.webkit="undefined"!=typeof navigator&&/webkit/i.test(navigator.userAgent),c.ua.iDevice="undefined"!=typeof navigator&&/iPad|iPhone|iPod/i.test(navigator.userAgent)}("undefined"!=typeof io?io:module.exports,this),function(a,b){function c(){}a.EventEmitter=c,c.prototype.on=function(a,c){return this.$events||(this.$events={}),this.$events[a]?b.util.isArray(this.$events[a])?this.$events[a].push(c):this.$events[a]=[this.$events[a],c]:this.$events[a]=c,this},c.prototype.addListener=c.prototype.on,c.prototype.once=function(a,b){function d(){c.removeListener(a,d),b.apply(this,arguments)}var c=this;return d.listener=b,this.on(a,d),this},c.prototype.removeListener=function(a,c){if(this.$events&&this.$events[a]){var d=this.$events[a];if(b.util.isArray(d)){var e=-1;for(var f=0,g=d.length;f<g;f++)if(d[f]===c||d[f].listener&&d[f].listener===c){e=f;break}if(e<0)return this;d.splice(e,1),d.length||delete this.$events[a]}else(d===c||d.listener&&d.listener===c)&&delete this.$events[a]}return this},c.prototype.removeAllListeners=function(a){return a===undefined?(this.$events={},this):(this.$events&&this.$events[a]&&(this.$events[a]=null),this)},c.prototype.listeners=function(a){return this.$events||(this.$events={}),this.$events[a]||(this.$events[a]=[]),b.util.isArray(this.$events[a])||(this.$events[a]=[this.$events[a]]),this.$events[a]},c.prototype.emit=function(a){if(!this.$events)return!1;var c=this.$events[a];if(!c)return!1;var d=Array.prototype.slice.call(arguments,1);if("function"==typeof c)c.apply(this,d);else{if(!b.util.isArray(c))return!1;var e=c.slice();for(var f=0,g=e.lenLine truncated

public/javascripts/views/list.js

@@ -5,15 +5,30 @@ var app = app || {};
   app.ListView = Backbone.View.extend({
 
     el: $("#main .children"),
-    initialize: function(initialTasks) {
-      this.collection = new app.List(initialTasks);
-      this.render();
+
+    events: {
+      'click #add': 'addTask'
     },
+
+    initialize: function() {
+      this.collection = new app.List();
+      this.collection.fetch();
+      this.render();
+
+      this.listenTo(this.collection, 'add', this.renderTask);
+    },
+
+    addTask: function() {
+      console.log('yes');
+      //var view = new app.TaskView({model: task})
+    },
+
     render: function() {
       this.collection.each(function(task) {
         this.renderTask(task);
       }, this);
     },
+
     renderTask: function(task) {
       var taskView = new app.TaskView({
         model: task

public/javascripts/views/task.js

@@ -9,35 +9,51 @@ var app = app || {};
 
     events: {
       'click .task': 'edit',
-      'blur .edit': 'close',
-      'keypress .edit': 'add'
+      'blur .edit': 'close'
+    },
+
+    initialize: function() {
+      this.listenTo(this.model, 'change', this.render);
+      this.listenTo(this.model, 'destroy', this.remove);
     },
 
     render: function() {
       var tmpl = _.template(this.template);
+      var task = this;
       this.$el.html(tmpl(this.model.toJSON()));
       this.$input = this.$('.edit');
+      socket.on('task', function(data){
+        if (task.model.id == data.id) {
+          if (task.$input.val != data.content)
+            task.$input.val(data.content);
+        }
+      });
       return this;
     },
 
     edit: function() {
       this.$el.addClass('editing');
       this.$input.focus();
+      var id = (this.model.id === undefined) ? '' : this.model.id;
+      var parent_id = (this.model.parent_id === undefined) ? '' : this.model.parent_id;
+      this.$input.on('keyup',function(){
+        var value = $(this).val().trim();
+        socket.emit('task', { 
+          id: id, 
+          parent_id: parent_id, 
+          content: value 
+        });
+      });
     },
 
     close: function() {
       var value = this.$input.val().trim();
-      this.model.save({content: value});
-      this.$el.removeClass('editing');
-    },
-
-    add: function(e) {
-      if (e.which === ENTER_KEY) {
-        this.$input.blur();
-        var render = new app.TaskView({model: new app.Task()}).render();
-        render.$el.insertAfter(this.$el);
-        render.$input.focus();
+      if (value === '') {
+        this.model.destroy();
       }
+      else
+        this.model.save({content: value});
+      this.$el.removeClass('editing');
     }
 
   });