Make editing work, building towards drag/drop saving

cms/static/coffee/src/models/module.coffee

@@ -10,7 +10,3 @@ class CMS.Models.Module extends Backbone.Model
     @unset('module')
     delete attributes.module
     super(attributes)
-
-  save: (args...) ->
-    @set(data: @module.save()) if @module
-    super(args...)

cms/static/coffee/src/views/module_edit.coffee

@@ -3,58 +3,65 @@ class CMS.Views.ModuleEdit extends Backbone.View
   className: 'xmodule_edit'
 
   initialize: ->
-    @delegate()
+    @module = @options.module
+    @module.onUpdate(@save)
 
-    @$component_editor = @$el.find('.component-editor')
-    @$metadata = @$component_editor.find('.metadata_edit')
+    @setEvents()
 
-  delegate: ->
+  $component_editor: -> @$el.find('.component-editor')
+
+  setEvents: ->
     id = @$el.data('id')
 
-    events = {}
-    events["click .component-editor[data-id=#{ id }] .cancel-button"] = 'cancel'
-    events["click .component-editor[data-id=#{ id }] .save-button"] = 'save'
-    events["click .component-actions[data-id=#{ id }] .edit-button"] = 'edit'
+    @events = {}
+    @events["click .component-editor[data-id=#{ id }] .cancel-button"] = 'clickCancelButton'
+    @events["click .component-editor[data-id=#{ id }] .save-button"] = 'clickSaveButton'
+    @events["click .component-actions[data-id=#{ id }] .edit-button"] = 'clickEditButton'
 
-    @delegateEvents(events)
+    @delegateEvents()
 
   metadata: ->
     # cdodge: package up metadata which is separated into a number of input fields
     # there's probably a better way to do this, but at least this lets me continue to move onwards
     _metadata = {}
 
-    if @$metadata
+    $metadata = @$component_editor().find('.metadata_edit')
+
+    if $metadata
       # walk through the set of elments which have the 'xmetadata_name' attribute and
       # build up a object to pass back to the server on the subsequent POST
-      _metadata[$(el).data("metadata-name")] = el.value for el in $('[data-metadata-name]', @$metadata)
+      _metadata[$(el).data("metadata-name")] = el.value for el in $('[data-metadata-name]', $metadata)
 
     _metadata
 
-  save: (event) =>
-    event.preventDefault()
-    @model.save(
-      metadata: @metadata()
-    ).done((preview) =>
+  save: (data) =>
+    @model.set(data)
+    @model.save().done((preview) =>
       alert("Your changes have been saved.")
-      
-      new_el = $(preview)
-      @$el.replaceWith(new_el)
-      @$el = new_el
 
-      @delegate()
-
-      @model.module = XModule.loadModule(@$el)
+      $preview = $(preview)
+      @$el.replaceWith($preview)
+      @setElement($preview)
+      @module.constructor(@$el)
       XModule.loadModules(@$el)
+
     ).fail( ->
       alert("There was an error saving your changes. Please try again.")
     )
 
-  cancel: (event) ->
+  clickSaveButton: (event) =>
+    event.preventDefault()
+    data = @module.save()
+    data.metadata = @metadata()
+
+    @save(data)
+
+  clickCancelButton: (event) ->
     event.preventDefault()
     @$el.removeClass('editing')
-    @$component_editor.slideUp(150)
+    @$component_editor().slideUp(150)
 
-  edit: (event) ->
+  clickEditButton: (event) ->
     event.preventDefault()
     @$el.addClass('editing')
-    @$component_editor.slideDown(150)
+    @$component_editor().slideDown(150)

cms/static/js/base.js

@@ -14,16 +14,13 @@ $(document).ready(function() {
     $newComponentStep2 = $('.new-component-step-2');
     $newComponentButton = $('.new-component-button');
 
-    $(document).bind('XModule.loaded', function(e, element) {
-        if ($(element).hasClass('.xmodule_display')) {
-            return
-        }
+    $(document).bind('XModule.loaded.edit', function(e, element, module) {
         var previewType = $(element).data('preview-type');
         var moduleType = $(element).data('type');
         new CMS.Views.ModuleEdit({
             el: element,
+            module: module,
             model: new CMS.Models.Module({
-                module: $(element).data('module'),
                 id: $(element).data('id'),
                 type: moduleType == 'None' ? null : moduleType,
                 previewType: previewType == 'None' ? null : previewType,