Create separate List#renderItems for use in setValue since render here w...

distribution.amd/editors/list.js

@@ -4,7 +4,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
 
   /**
    * List editor
-   * 
+   *
    * An array editor. Creates a list of other editor items.
    *
    * Special options:
@@ -50,15 +50,34 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
     },
 
     render: function() {
-      var self = this,
-          value = this.value || [];
-
       //Create main element
       var $el = $($.trim(this.template()));
 
       //Store a reference to the list (item container)
       this.$list = $el.is('[data-items]') ? $el : $el.find('[data-items]');
 
+      this.renderItems();
+
+      this.setElement($el);
+      this.$el.attr('id', this.id);
+      this.$el.attr('name', this.key);
+
+      if (this.hasFocus) this.trigger('blur', this);
+
+      return this;
+    },
+
+    renderItems: function() {
+      var self = this,
+          value = this.value || [];
+
+      // Easier to just empty the $list but we could potentially have default items
+      // for a custom template.
+      _.each(this.items, function(item) {
+        item.$el.remove();
+      });
+      this.items = [];
+
       //Add existing items
       if (value.length) {
         _.each(value, function(itemValue) {
@@ -70,14 +89,6 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
       else {
         if (!this.Editor.isAsync) this.addItem();
       }
-
-      this.setElement($el);
-      this.$el.attr('id', this.id);
-      this.$el.attr('name', this.key);
-
-      if (this.hasFocus) this.trigger('blur', this);
-
-      return this;
     },
 
     /**
@@ -98,11 +109,11 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
         Editor: this.Editor,
         key: this.key
       }).render();
-      
+
       var _addItem = function() {
         self.items.push(item);
         self.$list.append(item.el);
-        
+
         item.editor.on('all', function(event) {
           if (event === 'change') return;
 
@@ -136,11 +147,11 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
             self.trigger('blur', self);
           }, 0);
         }, self);
-        
+
         if (userInitiated || value) {
           item.addEventTriggered = true;
         }
-        
+
         if (userInitiated) {
           self.trigger('add', self, item.editor);
           self.trigger('change', self);
@@ -157,7 +168,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
         _addItem();
         item.editor.focus();
       }
-      
+
       return item;
     },
 
@@ -174,7 +185,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
 
       this.items[index].remove();
       this.items.splice(index, 1);
-      
+
       if (item.addEventTriggered) {
         this.trigger('remove', this, item.editor);
         this.trigger('change', this);
@@ -194,20 +205,20 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
 
     setValue: function(value) {
       this.value = value;
-      this.render();
+      this.renderItems();
     },
-    
+
     focus: function() {
       if (this.hasFocus) return;
 
       if (this.items[0]) this.items[0].editor.focus();
     },
-    
+
     blur: function() {
       if (!this.hasFocus) return;
 
       var focusedItem = _.find(this.items, function(item) { return item.editor.hasFocus; });
-      
+
       if (focusedItem) focusedItem.editor.blur();
     },
 
@@ -219,10 +230,10 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
 
       Form.editors.Base.prototype.remove.call(this);
     },
-    
+
     /**
      * Run validation
-     * 
+     *
      * @return {Object|Null}
      */
     validate: function() {
@@ -312,7 +323,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
 
       //Replace the entire element so there isn't a wrapper tag
       this.setElement($el);
-        
+
       return this;
     },
 
@@ -323,11 +334,11 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
     setValue: function(value) {
       this.editor.setValue(value);
     },
-    
+
     focus: function() {
       this.editor.focus();
     },
-    
+
     blur: function() {
       this.editor.blur();
     },
@@ -396,7 +407,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
 
 
   /**
-   * Base modal object editor for use with the List editor; used by Object 
+   * Base modal object editor for use with the List editor; used by Object
    * and NestedModal list types
    */
   Form.editors.List.Modal = Form.editors.Base.extend({
@@ -415,9 +426,9 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
      */
     initialize: function(options) {
       options = options || {};
-      
+
       Form.editors.Base.prototype.initialize.call(this, options);
-      
+
       //Dependencies
       if (!Form.editors.List.Modal.ModalAdapter) throw new Error('A ModalAdapter is required');
 
@@ -466,7 +477,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
      * Function which returns a generic string representation of an object
      *
      * @param {Object} value
-     * 
+     *
      * @return {String}
      */
     itemToString: function(value) {
@@ -503,7 +514,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
 
       //If there's a specified toString use that
       if (schema.itemToString) return schema.itemToString(value);
-      
+
       //Otherwise use the generic method or custom overridden method
       return this.itemToString(value);
     },
@@ -528,7 +539,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
       this.trigger('focus', this);
 
       modal.on('cancel', this.onModalClosed, this);
-      
+
       modal.on('ok', _.bind(this.onModalSubmitted, this));
     },
 
@@ -552,7 +563,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
       this.renderSummary();
 
       if (isNew) this.trigger('readyToAdd');
-      
+
       this.trigger('change', this);
 
       this.onModalClosed();
@@ -576,16 +587,16 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
     setValue: function(value) {
       this.value = value;
     },
-    
+
     focus: function() {
       if (this.hasFocus) return;
 
       this.openEditor();
     },
-    
+
     blur: function() {
       if (!this.hasFocus) return;
-      
+
       if (this.modal) {
         this.modal.trigger('cancel');
       }
@@ -600,7 +611,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
     //Defaults to BootstrapModal (http://github.com/powmedia/backbone.bootstrap-modal)
     //Can be replaced with another adapter that implements the same interface.
     ModalAdapter: Backbone.BootstrapModal,
-    
+
     //Make the wait list for the 'ready' event before adding the item to the list
     isAsync: true
   });
@@ -643,7 +654,7 @@ define(['jquery', 'underscore', 'backbone', 'backbone-forms'], function($, _, Ba
 
       //If there's a specified toString use that
       if (schema.itemToString) return schema.itemToString(value);
-      
+
       //Otherwise use the model
       return new (schema.model)(value).toString();
     }