Only do one query for inserts

Author: davidlgj

src/directives/schema-form.js

@@ -5,8 +5,8 @@ FIXME: real documentation
 
 angular.module('schemaForm')
        .directive('sfSchema',
-['$compile', 'schemaForm', 'schemaFormDecorators', 'sfSelect',
-  function($compile,  schemaForm,  schemaFormDecorators, sfSelect) {
+['$compile', 'schemaForm', 'schemaFormDecorators', 'sfSelect', 'sfPath',
+  function($compile,  schemaForm,  schemaFormDecorators, sfSelect, sfPath) {
 
     var SNAKE_CASE_REGEXP = /[A-Z]/g;
     var snakeCase = function(name, separator) {
@@ -83,23 +83,35 @@ angular.module('schemaForm')
             //clean all but pre existing html.
             element.children(':not(.schema-form-ignore)').remove();
 
+            // Find all slots.
+            var slots = {};
+            var slotsFound = element[0].querySelectorAll('*[sf-insert-field]');
+
+            for (var i = 0; i < slotsFound.length; i++) {
+              slots[slotsFound[i].getAttribute('sf-insert-field')] = slotsFound[i];
+            }
+
             //Create directives from the form definition
-            angular.forEach(merged,function(obj,i){
-              var n = document.createElement(attrs.sfDecorator || snakeCase(schemaFormDecorators.defaultDecorator,'-'));
+            angular.forEach(merged, function(obj, i) {
+              var n = document.createElement(attrs.sfDecorator ||
+                                             snakeCase(schemaFormDecorators.defaultDecorator, '-'));
               n.setAttribute('form','schemaForm.form['+i+']');
-              var slot;
-              try {
-                slot = element[0].querySelector('*[sf-insert-field="' + obj.key + '"]');
-              } catch(err) {
-                // field insertion not supported for complex keys
-                slot = null;
-              }
-              if(slot) {
-                slot.innerHTML = "";
-                slot.appendChild(n);  
-              } else {
-                frag.appendChild(n);
+
+              // Check if there is a slot to put this in...
+              if (obj.key) {
+                var slot = slots[sfPath.stringify(obj.key)];
+                if (slot) {
+                  while (slot.firstChild) {
+                    slot.removeChild(slot.firstChild);
+                  }
+                  slot.appendChild(n);
+                  return;
+                }
               }
+
+              // ...otherwise add it to the frag
+              frag.appendChild(n);
+
             });
 
             element[0].appendChild(frag);

test/directives/schema-form-test.js

@@ -173,17 +173,17 @@ describe('directive',function(){
     });
   });
 
-  it('should preserve existing html and insert fields in matching slots',function(){
+  it('should preserve existing html and insert fields in matching slots', function() {
 
-    inject(function($compile,$rootScope){
+    inject(function($compile, $rootScope){
       var scope = $rootScope.$new();
       scope.person = {};
 
       scope.schema = exampleSchema;
 
-      scope.form = ["*"];
+      scope.form = ['*'];
 
-      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"><ul><li sf-insert-field="name"></li></ul></form>');
+      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"><ul><li sf-insert-field="[\'name\']"></li></ul></form>');
 
       $compile(tmpl)(scope);
       $rootScope.$apply();
@@ -192,7 +192,7 @@ describe('directive',function(){
       tmpl.children().eq(0).find('input').attr('ng-model').should.be.equal('model[\'name\']');
     });
   });
-  
+
 
   it('should handle submit buttons',function(){
 
@@ -592,7 +592,7 @@ describe('directive',function(){
 
     });
   });
-  
+
   it('should handle schema form default in deep structure',function(){
 
     inject(function($compile,$rootScope){
@@ -1725,8 +1725,8 @@ describe('directive',function(){
       tmpl.children().eq(0).find('select').eq(0).find('option').eq(2).text().trim().should.be.eq('The A');
     });
   });
-  
-  
+
+
   it('should update array form on model array ref change',function(){
 
     inject(function($compile,$rootScope){
@@ -1772,7 +1772,7 @@ describe('directive',function(){
       $rootScope.$apply();
 
       tmpl.children().eq(0).find('ol').children().length.should.be.eq(2);
-      
+
       var new_names = [
           {
             firstname: 'Bill',
@@ -1789,11 +1789,11 @@ describe('directive',function(){
             lastname: 'Buster'
           }
         ];
-        
+
       scope.person.names = new_names;
-      
+
       $rootScope.$apply();
-      
+
       tmpl.children().eq(0).find('ol').children().length.should.be.eq(4);
     });
   });