Added the domTargetResolver function to the infuser config, and updat…

…ed examples with new dom target approach
ifandelse · Oct 29, 2011 · d6a9c13 · d6a9c13
1 parent 9041dea
commit d6a9c13
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git a/examples/shorthand/main.js b/examples/shorthand/main.js
@@ -25,16 +25,16 @@ $(function(){
 
     $('#btnPlain').click(function(){
         // Shorthand syntax allows you to retrieve the template, and attach to target DOM element all in one call
-        infuser.infuse("HelloWorld", $("#targetPlain"), { postRender: togglePlain });
+        infuser.infuse("HelloWorld", { postRender: togglePlain, targetSelector: "#targetPlain" });
     });
 
     $('#btnFancy').click(function(){
         // Shorthand syntax also allows you to specify preRender and postRender callbacks, as well as a render override
         infuser
             .infuse(
                 "Example",
-                $("#targetFancy"),
                 {
+                    targetSelector: "#targetFancy",
                     model: model,
                     preRender: function(target, template) { $(target).children().remove().end().fadeOut().hide(); },
                     render:    function(target, template) { $(target).append(template).slideDown('slow'); },

diff --git a/examples/trafficcop/main.js b/examples/trafficcop/main.js
@@ -2,8 +2,8 @@ var toggled = false,
     doStuff = function(modelNum) {
         infuser.infuse(
             "Example",
-            $("#target"),
             {
+                targetSelector: "#target",
                 model: menus[modelNum],
                 render: function(target, template) {
                     $(target).append(template).slideDown('slow');

diff --git a/lib/infuser.js b/lib/infuser.js
@@ -130,7 +130,8 @@ var infuser = {
         templateUrl: "",
         templateSuffix: ".html",
         templatePrefix: "",
-        renderInstruction: function(template, model) { return template; } // NO_OP
+        renderInstruction: function(template, model) { return template; }, // NO_OP
+        domTargetResolver: function(templateId) { return "#" + templateId } // DEFAULT MAPPING
     },
 
     get: function(templateId, callback) {
@@ -187,15 +188,16 @@ var infuser = {
         return template;
     },
 
-    infuse: function(templateId, targetDomElement, renderOptions) {
+    infuse: function(templateId, renderOptions) {
         var options = $.extend({}, defaultRenderOptions, renderOptions),
-            self = this;
+            self = this,
+            targetElement = options.targetSelector || self.config.domTargetResolver(templateId);
         self.get(templateId, function(template) {
             var _template = template;
-            options.preRender(targetDomElement, _template);
+            options.preRender(targetElement, _template);
             _template = self.config.renderInstruction(_template, options.model);
-            options.render(targetDomElement, _template);
-            options.postRender(targetDomElement);
+            options.render(targetElement, _template);
+            options.postRender(targetElement);
         });
     }
 };

diff --git a/lib/infuser.min.gz.js b/lib/infuser.min.gz.js
diff --git a/lib/infuser.min.js b/lib/infuser.min.js
diff --git a/src/Api.js b/src/Api.js
@@ -10,7 +10,8 @@ var infuser = {
         templateUrl: "",
         templateSuffix: ".html",
         templatePrefix: "",
-        renderInstruction: function(template, model) { return template; } // NO_OP
+        renderInstruction: function(template, model) { return template; }, // NO_OP
+        domTargetResolver: function(templateId) { return "#" + templateId } // DEFAULT MAPPING
     },
 
     get: function(templateId, callback) {
@@ -67,15 +68,16 @@ var infuser = {
         return template;
     },
 
-    infuse: function(templateId, targetDomElement, renderOptions) {
+    infuse: function(templateId, renderOptions) {
         var options = $.extend({}, defaultRenderOptions, renderOptions),
-            self = this;
+            self = this,
+            targetElement = options.targetSelector || self.config.domTargetResolver(templateId);
         self.get(templateId, function(template) {
             var _template = template;
-            options.preRender(targetDomElement, _template);
+            options.preRender(targetElement, _template);
             _template = self.config.renderInstruction(_template, options.model);
-            options.render(targetDomElement, _template);
-            options.postRender(targetDomElement);
+            options.render(targetElement, _template);
+            options.postRender(targetElement);
         });
     }
 };