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/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');
     }
 
   });