add delete functionality and improve saving without conflicts

app/models/actor.js

@@ -1,6 +1,7 @@
 module.exports = Backbone.Model.extend({
-  url: '/actor',
+  url: '/actors',
   defaults : {
-    name : ""
+    name : '',
+    connections: []
   }
 });

app/styles/main.styl

@@ -53,6 +53,14 @@ body
       display block
     .name
       display none
+  span.delete
+    position absolute
+    top 0
+    right 0
+    background black
+    color white
+    padding 6px
+    border-radius 10px
 
 .breadcrumb
   margin 21px

app/views/actor_editor.js

@@ -17,14 +17,15 @@ module.exports = View.extend({
   createActor: function(event){
     var editor = this;
 
-    var actor = new Actor({
+    var actor = new Actor();
+    actor.save({
       pos : {
         x : event.clientX,
         y : event.clientY
       }
-    });
-    actor.save(null, { success : function(){
-      editor.collection.add(actor)
+    },{
+      success : function(){
+        editor.collection.add(actor);
     }});
   },
 

app/views/actor_view.js

@@ -10,12 +10,14 @@ module.exports = View.extend({
     'click .name': 'startEditName',
     'dblclick .name': 'startEditName',
     'blur .nameInput': 'stopEditName',
-    'keydown .nameInput': 'preventEnter'
+    'keydown .nameInput': 'preventEnter',
+    'click .delete': 'deleteClicked'
   },
 
   initialize: function(){
     _.bindAll(this, 'stopMoving', 'drag');
-    this.model.on('change', this.render, this);
+    this.model.on('change:name', this.render, this);
+    this.model.on('destroy', this.modelDestroyed, this);
   },
 
   startEditName: function(event){
@@ -27,7 +29,7 @@ module.exports = View.extend({
   stopEditName: function(event){
     this.$el.removeClass('editingName');
     var newValue = this.$('.nameInput').val()
-    this.model.save('name', newValue);
+    this.model.save({name: newValue});
     this.$el.draggable('enable');
   },
 
@@ -37,6 +39,14 @@ module.exports = View.extend({
       this.stopEditName(event);
     }
   },
+
+  deleteClicked: function(){
+    this.model.destroy();
+  },
+
+  modelDestroyed: function(){
+    this.$el.remove();
+  },
 
   stopMoving : function(){
     this.model.save(this.getPosition());

app/views/templates/actor.eco

@@ -5,4 +5,5 @@
     <%= @name %>
   <% end %>
 </div>
-<input type="text" value="<%= @name %>" placeholder="Name" class='nameInput' />
+<input type="text" value="<%= @name %>" placeholder="Name" class='nameInput' />
+<span class="delete">X</span>