Got clearing of fields working.

cms/static/js/models/metadata_model.js

@@ -4,10 +4,49 @@ CMS.Models.Metadata = Backbone.Model.extend({
 
     defaults: {
         "display_name": null,
-        "value" : null
+        "value" : null,
+        "explicitly_set": null,
+        "default_value" : null
+    },
+
+    initialize: function() {
+        this.original_value = this.get('value');
+        this.original_explicitly_set = this.get('explicitly_set');
     },
 
     getOriginalValue: function() {
+        return this.originalValue;
+    },
+
+    isModified : function() {
+        if (!this.get('explicitly_set') && !this.original_explicitly_set) {
+            return false;
+        }
+        if (this.get('explicitly_set') && this.original_explicitly_set) {
+            return this.get('value') !== this.original_value;
+        }
+        return true;
+    },
+
+    isExplicitlySet: function() {
+        return this.get('explicitly_set');
+    },
+
+    getDisplayValue : function () {
         return this.get('value');
+    },
+
+    getValue: function() {
+        return this.get('explicitly_set') ? this.get('value') : null;
+    },
+
+    setValue: function (value) {
+        this.set('explicitly_set', true);
+        this.set('value', value);
+    },
+
+    clear: function() {
+        this.set('explicitly_set', false);
+        this.set('value', this.get('default_value'));
     }
 });

cms/static/js/views/metadata_editor_view.js

@@ -49,3 +49,118 @@ CMS.Views.Metadata.Editor = Backbone.View.extend({
         return modified_values;
     }
 });
+
+CMS.Views.Metadata.AbstractEditor = Backbone.View.extend({
+
+    initialize : function() {
+        var self = this;
+        var templateName = this.getTemplateName();
+        this.uniqueId = _.uniqueId(templateName + "_");
+        window.templateLoader.loadRemoteTemplate(templateName,
+            "/static/client_templates/" + templateName + ".html",
+            function (raw_template) {
+                self.template = _.template(raw_template);
+                self.$el.append(self.template({model: self.model, uniqueId: self.uniqueId}));
+                self.render();
+            }
+        );
+    },
+
+    getTemplateName : function () {},
+
+    getValueFromEditor : function () {},
+
+    setValueInEditor : function (value) {},
+
+    updateModel: function () {
+        this.model.setValue(this.getValueFromEditor());
+        this.render();
+    },
+
+    clear: function () {
+        this.model.clear();
+        this.render();
+    },
+
+    showClearButton: function() {
+        if (!this.$el.hasClass('is-set')) {
+            this.$el.addClass('is-set');
+            // TODO: can we use toggleclass?
+            this.$el.find('.setting-clear').removeClass('inactive');
+            this.$el.find('.setting-clear').addClass('active');
+        }
+    },
+
+    render: function () {
+        if (!this.template) return;
+
+        this.setValueInEditor(this.model.getDisplayValue());
+
+        if (this.model.isExplicitlySet()) {
+            this.showClearButton();
+        }
+        else {
+            this.$el.removeClass('is-set');
+            // TODO: can we use toggleclass?
+            this.$el.find('.setting-clear').addClass('inactive');
+            this.$el.find('.setting-clear').removeClass('active');
+        }
+    },
+
+
+    modified: function () {
+        return this.model.isModified();
+    },
+
+    getValue: function() {
+        return this.model.getValue();
+    }
+});
+
+CMS.Views.Metadata.String = CMS.Views.Metadata.AbstractEditor.extend({
+
+    events : {
+        "change input" : "updateModel",
+        "keypress .setting-input" : "showClearButton"  ,
+        "click .setting-clear" : "clear"
+    },
+
+    getTemplateName : function () {
+        return "metadata_string_entry";
+    },
+
+    getValueFromEditor : function () {
+        var val = this.$el.find('#' + this.uniqueId).val();
+//      TODO: not sure this is necessary. Trying to support empty value ("").
+        return val ? val : "";
+    },
+
+    setValueInEditor : function (value) {
+        this.$el.find('input').val(value);
+    }
+});
+
+CMS.Views.Metadata.Option = CMS.Views.Metadata.AbstractEditor.extend({
+
+    events : {
+        "change select" : "updateModel",
+        "click .setting-clear" : "clear"
+    },
+
+    getTemplateName : function () {
+        return "metadata_option_entry";
+    },
+
+    getValueFromEditor : function () {
+        return this.$el.find('#' + this.uniqueId).find(":selected").text();
+    },
+
+    setValueInEditor : function (value) {
+        $('#' + this.uniqueId + " option").filter(function() {
+            return $(this).text() === value;
+        }).prop('selected', true);
+    }
+});
+
+
+

cms/static/js/views/metadata_number_view.js

-if (!CMS.Views['Metadata']) CMS.Views.Metadata = {};
-
-CMS.Views.Metadata.Number = CMS.Views.Metadata.String.extend({
-
-    getValue: function() {
-        var stringVal = this.$el.find('#' + this.uniqueId).val();
-        if (this.isInteger) {
-            return parseInt(stringVal)
-        }
-        else {
-            return parseFloat(stringVal)
-        }
-    }
-});
\ No newline at end of file

cms/static/js/views/metadata_option_view.js

-if (!CMS.Views['Metadata']) CMS.Views.Metadata = {};
-
-CMS.Views.Metadata.Option = Backbone.View.extend({
-
-    // Model class ...
-    events : {
-    },
-
-    initialize : function() {
-        var self = this;
-        this.uniqueId = _.uniqueId('metadata_option_entry_');
-        // instantiates an editor template for each update in the collection
-        window.templateLoader.loadRemoteTemplate("metadata_option_entry",
-            "/static/client_templates/metadata_option_entry.html",
-            function (raw_template) {
-                self.template = _.template(raw_template);
-                self.$el.append(self.template({model: self.model, uniqueId: self.uniqueId}));
-                $('#' + self.uniqueId + " option").filter(function() {
-                    return $(this).text() === self.model.get('value');
-                }).prop('selected', true);
-                if (self.model.get('explicitly_set')) {
-                    self.$el.addClass('is-set');
-                    self.$el.find('#'+self.uniqueId + " .setting-clear").addClass('active');
-                }
-
-            }
-        );
-    },
-
-    modified: function () {
-        return this.getValue() !== this.model.getOriginalValue();
-    },
-
-    getValue: function() {
-        return this.$el.find('#' + this.uniqueId).find(":selected").text();
-    }
-});

cms/static/js/views/metadata_string_view.js

-if (!CMS.Views['Metadata']) CMS.Views.Metadata = {};
-
-CMS.Views.Metadata.String = Backbone.View.extend({
-
-    // Model class ...
-    events : {
-    },
-
-    initialize : function() {
-        var self = this;
-        this.uniqueId = _.uniqueId('metadata_string_entry_');
-        // instantiates an editor template for each update in the collection
-        window.templateLoader.loadRemoteTemplate("metadata_string_entry",
-            "/static/client_templates/metadata_string_entry.html",
-            function (raw_template) {
-                self.template = _.template(raw_template);
-                self.$el.append(self.template({model: self.model, uniqueId: self.uniqueId}));
-                if (self.model.get('explicitly_set')) {
-                    self.$el.addClass('is-set');
-                    self.$el.find('#'+self.uniqueId + " .setting-clear").addClass('active');
-                }
-            }
-        );
-    },
-
-    modified: function () {
-       return this.getValue() !== this.model.getOriginalValue();
-    },
-
-    getValue: function() {
-        return this.$el.find('#' + this.uniqueId).val();
-    }
-});

cms/templates/base.html

@@ -52,9 +52,6 @@
 
     <!--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/metadata_string_view.js')}"></script>
-    <script type="text/javascript" src="${static.url('js/views/metadata_number_view.js')}"></script>
-    <script type="text/javascript" src="${static.url('js/views/metadata_option_view.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>