Beginnings of Backbone views/models.

cms/static/client_templates/generic_metadata_entry.html

+<label><%= model.get('display_name') %>:</label>
+<input type='text' class='editor' value='<%= model.get("value") %>' size='60'/>

cms/static/client_templates/metadata_editor.html

+<ul>
+    <% _.each(metadata_entries, function(entry) { %>
+    <li>
+        <div class='metadata_entry' />
+    </li>
+    <% }) %>
+</ul>
\ No newline at end of file

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

@@ -20,29 +20,15 @@ class CMS.Views.ModuleEdit extends Backbone.View
   loadEdit: ->
     if not @module
       @module = XModule.loadModule(@$el.find('.xmodule_edit'))
-      @originalMetadata = @metadata()
-
-  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 = {}
-
-    $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)
-
-    return _metadata
+      # At this point, metadata-edit.html will be loaded, and the metadata (as JSON) is available.
+      metadataEditor = @$el.find('.metadata_edit')
+      @metadataEditor = new CMS.Views.Metadata.Editor({
+          el: metadataEditor,
+          model: new CMS.Models.MetadataEditor(metadataEditor.data('metadata'))
+          });
 
   changedMetadata: ->
-    currentMetadata = @metadata()
-    changedMetadata = {}
-    for key of currentMetadata
-      if currentMetadata[key] != @originalMetadata[key]
-        changedMetadata[key] = currentMetadata[key]
-    return changedMetadata
+    return @metadataEditor.getModifiedMetadataValues()
 
   cloneTemplate: (parent, template) ->
     $.post("/clone_item", {

cms/static/js/models/metadata_editor.js

+CMS.Models.MetadataEditor = Backbone.Model.extend({
+    // This model class is not suited for restful operations and is considered just a server side initialized container
+    url: '',
+
+    defaults: {
+    }
+
+});

cms/static/js/models/metadata_model.js

+CMS.Models.Metadata = Backbone.Model.extend({
+    // This model class is not suited for restful operations and is considered just a server side initialized container
+    url: '',
+
+    defaults: {
+        "display_name": null,
+        "value" : null
+    },
+
+    getOriginalValue: function() {
+        return this.get('value');
+    }
+});

cms/static/js/views/generic_metadata_editor.js

+if (!CMS.Views['Metadata']) CMS.Views.Metadata = {};
+
+CMS.Views.Metadata.Generic = Backbone.View.extend({
+
+    // Model class ...
+    events : {
+    },
+
+    initialize : function() {
+        var self = this;
+        // instantiates an editor template for each update in the collection
+        window.templateLoader.loadRemoteTemplate("metadata_entry",
+            "/static/client_templates/generic_metadata_entry.html",
+            function (raw_template) {
+                self.template = _.template(raw_template);
+                self.$el.append(self.template({model: self.model}));
+            }
+        );
+    },
+
+    modified: function () {
+       return this.getValue() !== this.model.getOriginalValue();
+    },
+
+    getValue: function() {
+        return this.$el.find('.editor').val();
+    }
+});

cms/static/js/views/metadata_editor_view.js

+if (!CMS.Views['Metadata']) CMS.Views.Metadata = {};
+
+CMS.Views.Metadata.Editor = Backbone.View.extend({
+
+    // Model class is ...
+    events : {
+    },
+
+    views : {}, // child views
+
+    initialize : function() {
+        var self = this;
+        // instantiates an editor template for each update in the collection
+        window.templateLoader.loadRemoteTemplate("metadata_editor",
+            "/static/client_templates/metadata_editor.html",
+            function (raw_template) {
+                self.template = _.template(raw_template);
+                self.$el.append(self.template({metadata_entries: self.model.attributes}));
+                var counter = 0;
+                _.each(self.model.attributes,
+                    function(item, key) {
+                        self.views[key] = new CMS.Views.Metadata.Generic({
+                                el: self.$el.find('.metadata_entry')[counter],
+                                model: new CMS.Models.Metadata(item)
+                            }
+                        );
+                        counter+=1;
+                    });
+            }
+        );
+    },
+
+    getModifiedMetadataValues: function () {
+        var modified_values = {};
+        _.each(this.views,
+            function (item, key) {
+                if (item.modified()) {
+                    modified_values[key] = item.getValue();
+                }
+            }
+        );
+        return modified_values;
+    }
+});

cms/templates/base.html

@@ -49,6 +49,13 @@
     <script src="${static.url('js/vendor/jquery.smooth-scroll.min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
+
+    <!--TODO: not the right place-->
+    <script type="text/javascript" src="${static.url('js/models/metadata_model.js')}"></script>
+    <script type="text/javascript" src="${static.url('js/views/generic_metadata_editor.js')}"></script>
+    <script type="text/javascript" src="${static.url('js/models/metadata_editor.js')}"></script>
+    <script type="text/javascript" src="${static.url('js/views/metadata_editor_view.js')}"></script>
+    <script type="text/javascript" src="${static.url('js/template_loader.js')}"></script>
     <script type="text/javascript">
     document.write('\x3Cscript type="text/javascript" src="' +
       document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');

cms/templates/widgets/metadata-edit.html

 <%
   import hashlib
-  from xmodule.fields import StringyInteger, StringyFloat
+  import json
   hlskey = hashlib.md5(module.location.url()).hexdigest()
 %>
-<section class="metadata_edit">
-  <ul>
-    % for field_name, field_value in editable_metadata_fields.items():
-    <li>
-      % if field_name == 'source_code':
-        % if field_value['explicitly_set'] is True:
-            <a href="#hls-modal-${hlskey}" style="color:yellow;" id="hls-trig-${hlskey}" >Edit High Level Source</a>
-        % endif
-      % else:
-        <label>${field_value['field'].display_name}:</label>
- 	      <input type='text' data-metadata-name='${field_value["field"].display_name}'
-            ## This is a hack to keep current behavior for weight and attempts (empty will parse OK as unset).
-            ## This hack will go away with our custom editors.
-            % if field_value["value"] == None and (isinstance(field_value["field"], StringyFloat) or isinstance(field_value["field"], StringyInteger)):
-              value = ''
-            % else:
-              value='${field_value["field"].to_json(field_value["value"])}'
-            % endif
-            size='60' />
-        ## Change to True to see all the information being passed through.
-        % if False:
-            <label>Help: ${field_value['field'].help}</label>
-            <label>Type: ${type(field_value['field']).__name__}</label>
-            <label>Inheritable: ${field_value['inheritable']}</label>
-            <label>Showing inherited value: ${field_value['inheritable'] and not field_value['explicitly_set']}</label>
-            <label>Explicitly set: ${field_value['explicitly_set']}</label>
-            <label>Default value: ${field_value['default_value']}</label>
-            % if field_value['field'].values:
-              <label>Possible values:</label>
-              % for value in field_value['field'].values:
-                <label>${value}</label>
-              % endfor
-            % endif
-        % endif
-      % endif
-    </li>
-    % endfor
-  </ul>
 
-  % if 'source_code' in editable_metadata_fields and editable_metadata_fields['source_code']['explicitly_set']:
+<% showHighLevelSource='source_code' in json_metadata_data and json_metadata_data['source_code']['explicitly_set'] %>
+<% del json_metadata_data['source_code'] %>
+<section class="metadata_edit" data-metadata='${json.dumps(json_metadata_data)}'/>
+
+% if showHighLevelSource:
+    <a href="#hls-modal-${hlskey}" style="color:yellow;" id="hls-trig-${hlskey}" >Edit High Level Source</a>
     <%include file="source-edit.html" />
-  % endif
+% endif
 
-</section>

common/lib/xmodule/xmodule/mako_module.py

@@ -31,9 +31,13 @@ class MakoModuleDescriptor(XModuleDescriptor):
         """
         Return the context to render the mako template with
         """
+        # TODO: just return a single thing.
+        [editable_metadata, simplified_metadata] = self.editable_metadata_fields
         return {
             'module': self,
-            'editable_metadata_fields': self.editable_metadata_fields
+            'editable_metadata_fields': editable_metadata,
+            'json_metadata_data' : simplified_metadata
+
         }
 
     def get_html(self):

common/lib/xmodule/xmodule/x_module.py

@@ -626,6 +626,7 @@ class XModuleDescriptor(XModuleFields, HTMLSnippet, ResourceTemplates, XBlock):
         inherited_metadata = getattr(self, '_inherited_metadata', {})
         inheritable_metadata = getattr(self, '_inheritable_metadata', {})
         metadata = {}
+        simple_metadata = {}
         for field in self.fields:
 
             if field.scope != Scope.settings or field in self.non_editable_metadata_fields:
@@ -645,9 +646,15 @@ class XModuleDescriptor(XModuleFields, HTMLSnippet, ResourceTemplates, XBlock):
                                     'value': value,
                                     'default_value': default_value,
                                     'inheritable': inheritable,
-                                    'explicitly_set': explicitly_set }
+                                    'explicitly_set': explicitly_set}
 
-        return metadata
+            simple_metadata[field.name] = {'value': field.to_json(value),
+                                           'display_name' : field.display_name,
+                                           'default_value': field.to_json(default_value),
+                                           'inheritable': inheritable,
+                                           'explicitly_set': explicitly_set}
+
+        return metadata, simple_metadata
 
 
 class DescriptorSystem(object):