Change to Backbone collection.

cms/static/coffee/spec/views/metadata_edit_spec.coffee

@@ -65,30 +65,32 @@ describe "Test Metadata Editor", ->
     # Test for the editor that creates the individual views.
     describe "CMS.Views.Metadata.Editor creates editors for each field", ->
         beforeEach ->
-            @model = new Backbone.Model({
-                num_inputs: integerEntry,
-                weight: floatEntry,
-                show_answer: selectEntry,
-                display_name: genericEntry,
-                unknown_type: {
-                    default_value: null,
-                    display_name: "Unknown",
-                    explicitly_set: true,
-                    field_name: "unknown_type",
-                    help: "Mystery property.",
-                    inheritable: false,
-                    options: [
-                        {"display_name": "Always", "value": "always"},
-                        {"display_name": "Answered", "value": "answered"},
-                        {"display_name": "Never", "value": "never"}],
-                    type: "unknown type",
-                    value: null
-                }
-            })
+            @model = new CMS.Models.MetadataCollection(
+                [
+                    integerEntry,
+                    floatEntry,
+                    selectEntry,
+                    genericEntry,
+                    {
+                        default_value: null,
+                        display_name: "Unknown",
+                        explicitly_set: true,
+                        field_name: "unknown_type",
+                        help: "Mystery property.",
+                        inheritable: false,
+                        options: [
+                            {"display_name": "Always", "value": "always"},
+                            {"display_name": "Answered", "value": "answered"},
+                            {"display_name": "Never", "value": "never"}],
+                        type: "unknown type",
+                        value: null
+                    }
+                ]
+            )
 
         it "creates child views on initialize, and sorts them alphabetically", ->
-            view = new CMS.Views.Metadata.Editor({model: @model})
-            childModels = view.models
+            view = new CMS.Views.Metadata.Editor({collection: @model})
+            childModels = view.collection.models
             expect(childModels.length).toBe(5)
             childViews = view.$el.find('.setting-input')
             expect(childViews.length).toBe(5)
@@ -104,16 +106,15 @@ describe "Test Metadata Editor", ->
             verifyEntry(4, 'Weight', 'number')
 
         it "returns its display name", ->
-            view = new CMS.Views.Metadata.Editor({model: @model})
+            view = new CMS.Views.Metadata.Editor({collection: @model})
             expect(view.getDisplayName()).toBe("Word cloud")
 
         it "returns an empty string if there is no display name property with a valid value", ->
-            view = new CMS.Views.Metadata.Editor({model: new Backbone.Model()})
+            view = new CMS.Views.Metadata.Editor({collection: new CMS.Models.MetadataCollection()})
             expect(view.getDisplayName()).toBe("")
 
-            view = new CMS.Views.Metadata.Editor({model: new Backbone.Model({
-                display_name:
-                    {
+            view = new CMS.Views.Metadata.Editor({collection: new CMS.Models.MetadataCollection([
+                {
                     default_value: null,
                     display_name: "Display Name",
                     explicitly_set: false,
@@ -123,18 +124,18 @@ describe "Test Metadata Editor", ->
                     options: [],
                     type: CMS.Models.Metadata.GENERIC_TYPE,
                     value: null
-                    }
-                })
+
+                }])
             })
             expect(view.getDisplayName()).toBe("")
 
         it "has no modified values by default", ->
-            view = new CMS.Views.Metadata.Editor({model: @model})
+            view = new CMS.Views.Metadata.Editor({collection: @model})
             expect(view.getModifiedMetadataValues()).toEqual({})
 
         it "returns modified values only", ->
-            view = new CMS.Views.Metadata.Editor({model: @model})
-            childModels = view.models
+            view = new CMS.Views.Metadata.Editor({collection: @model})
+            childModels = view.collection.models
             childModels[0].setValue('updated display name')
             childModels[1].setValue(20)
             expect(view.getModifiedMetadataValues()).toEqual({

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

@@ -24,9 +24,13 @@ class CMS.Views.ModuleEdit extends Backbone.View
       @module = XModule.loadModule(@$el.find('.xmodule_edit'))
       # At this point, metadata-edit.html will be loaded, and the metadata (as JSON) is available.
       metadataEditor = @$el.find('.metadata_edit')
+      metadataData = metadataEditor.data('metadata')
+      models = [];
+      for key of metadataData
+        models.push(metadataData[key])
       @metadataEditor = new CMS.Views.Metadata.Editor({
           el: metadataEditor,
-          model: new Backbone.Model(metadataEditor.data('metadata'))
+          collection: new CMS.Models.MetadataCollection(models)
           })
 
       # Need to update set "active" class on data editor if there is one.

cms/static/js/models/metadata_model.js

@@ -102,6 +102,11 @@ CMS.Models.Metadata = Backbone.Model.extend({
     }
 });
 
+CMS.Models.MetadataCollection = Backbone.Collection.extend({
+    model : CMS.Models.Metadata,
+    comparator: "display_name"
+});
+
 CMS.Models.Metadata.SELECT_TYPE = "Select";
 CMS.Models.Metadata.INTEGER_TYPE = "Integer";
 CMS.Models.Metadata.FLOAT_TYPE = "Float";

cms/static/js/views/metadata_editor_view.js

@@ -2,7 +2,7 @@ if (!CMS.Views['Metadata']) CMS.Views.Metadata = {};
 
 CMS.Views.Metadata.Editor = Backbone.View.extend({
 
-    // Model is simply a Backbone.Model instance.
+    // Model is CMS.Models.MetadataCollection,
     initialize : function() {
         var tpl = $("#metadata-editor-tpl").text();
         if(!tpl) {
@@ -10,31 +10,21 @@ CMS.Views.Metadata.Editor = Backbone.View.extend({
         }
         this.template = _.template(tpl);
 
-        this.$el.html(this.template({numEntries: this.model.keys().length}));
+        this.$el.html(this.template({numEntries: this.collection.length}));
         var counter = 0;
 
-        // Sort entries by display name.
-        var sortedObject = _.sortBy(this.model.attributes,
-            function (val) {
-                return val.display_name
-            });
-
-        this.models = [];
-
         var self = this;
-        _.each(sortedObject,
-            function (item) {
-                var model = new CMS.Models.Metadata(item);
-                self.models.push(model);
+        this.collection.each(
+            function (model) {
                 var data = {
                     el: self.$el.find('.metadata_entry')[counter++],
                     model: model
                 };
-                if (item.type === CMS.Models.Metadata.SELECT_TYPE) {
+                if (model.getType() === CMS.Models.Metadata.SELECT_TYPE) {
                     new CMS.Views.Metadata.Option(data);
                 }
-                else if (item.type === CMS.Models.Metadata.INTEGER_TYPE ||
-                    item.type === CMS.Models.Metadata.FLOAT_TYPE) {
+                else if (model.getType() === CMS.Models.Metadata.INTEGER_TYPE ||
+                    model.getType() === CMS.Models.Metadata.FLOAT_TYPE) {
                     new CMS.Views.Metadata.Number(data);
                 }
                 else {
@@ -49,7 +39,7 @@ CMS.Views.Metadata.Editor = Backbone.View.extend({
      */
     getModifiedMetadataValues: function () {
         var modified_values = {};
-        _.each(this.models,
+        this.collection.each(
             function (model) {
                 if (model.isModified()) {
                     modified_values[model.getFieldName()] = model.getValue();
@@ -65,12 +55,17 @@ CMS.Views.Metadata.Editor = Backbone.View.extend({
      * is no such entry, or if display_name does not have a value set, it returns an empty string.
      */
     getDisplayName: function () {
-        // It is possible that there is no display name set. In that case, return empty string.
-        if (this.model.get('display_name') === undefined) {
-            return '';
-        }
-        var displayNameValue = this.model.get('display_name').value;
-        return displayNameValue ? displayNameValue : '';
+        var displayName = '';
+        this.collection.each(
+            function (model) {
+                if (model.get('field_name') === 'display_name') {
+                    var displayNameValue = model.get('value');
+                    // It is possible that there is no display name value set. In that case, return empty string.
+                    displayName = displayNameValue ? displayNameValue : '';
+                }
+            }
+        );
+        return displayName;
     }
 });