FLUID-6297: Added a new view support for rendering fetched templates.

demos/prefsFramework/index.html

@@ -77,7 +77,6 @@
         <script type="text/javascript" src="../../src/components/textToSpeech/js/TextToSpeech.js"></script>
         <script type="text/javascript" src="../../src/components/orator/js/Orator.js"></script>
 
-        <script type="text/javascript" src="js/injectSVG.js"></script>
         <script type="text/javascript" src="js/prefsEditorDemo.js"></script>
 
         <!-- for Overview Panel -->
@@ -144,9 +143,13 @@
                         <span>National Oceanic and Atmospheric Administration</span>
                     </div>
                     <script>
-                        // need to inject the SVG so that we don't have to have the entire SVG document in the markup,
+                        // Need to inject the SVG so that we don't have to have the entire SVG document in the markup,
                         // but still be able to style it.
-                        demo.injectSVG("#headTitle", {svgSource: "images/NOAA_Logo.svg"})
+                        fluid.templateRenderingView({
+                            container: "#headTitle",
+                            template: "images/NOAA_Logo.svg",
+                            injectionType: "prepend"
+                        });
                     </script>
                     <div id="midBlock">
                         <nav>

src/components/orator/js/Orator.js

@@ -139,6 +139,7 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
             playing: false,
             enabled: true
         },
+        injectionType: "prepend",
         markup: {
             container: "<div class=\"flc-orator-controller fl-orator-controller\">" +
                 "<div class=\"fl-icon-orator\" aria-hidden=\"true\"></div>" +
@@ -163,10 +164,6 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
                 // when called through the jQuery click event the event object
                 // is passed in.
                 args: ["{that}", "playing"]
-            },
-            // overriding the addToParent to "prepend" the container to the parentContainer
-            addToParent: {
-                args: ["{that}.options.parentContainer", "{arguments}.0", "prepend"]
             }
         },
         listeners: {

src/framework/core/frameworkDependencies.json

@@ -17,10 +17,10 @@
             "./js/ModelTransformationTransforms.js",
             "./js/jquery.keyboard-a11y.js",
             "./js/FluidView.js",
-            "./js/NewViewSupport.js",
             "./js/FluidRequests.js",
             "./js/MessageResolver.js",
-            "./js/ResourceLoader.js"
+            "./js/ResourceLoader.js",
+            "./js/NewViewSupport.js"
         ],
         "dependencies": [
             "jQuery",

src/framework/core/js/NewViewSupport.js

@@ -35,39 +35,41 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
         }
     });
 
+    /**
+     * Used to add an element to a parent container. Internally it can use either of jQuery's prepend or append methods.
+     *
+     * @param {jQuery|DOMElement|Selector} parentContainer - any jQueryable selector representing the parent element to
+     *                                                       inject the `elm` into.
+     * @param {DOMElement|jQuery} elm - a DOM element or jQuery element to be added to the parent.
+     * @param {String} method - (optional) a string representing the method to use to add the `elm` to the
+     *                          `parentContainer`. The method can be "append" (default), "prepend", or "html" (will
+     *                          replace the contents).
+     */
+    fluid.newViewComponent.addToParent = function (parentContainer, elm, method) {
+        method = method || "append";
+        $(parentContainer)[method](elm);
+    };
+
     /**
      * Similar to fluid.newViewComponent; however, it will render its own markup including its container, into a
      * specified parent container.
      */
     fluid.defaults("fluid.containerRenderingView", {
         gradeNames: ["fluid.newViewComponent"],
         container: "@expand:{that}.renderContainer()",
-        // The DOM element which this component should append its markup on startup
+        // The DOM element which this component should inject its markup into on startup
         parentContainer: "fluid.notImplemented", // must be overridden
+        injectionType: "append",
         invokers: {
             renderMarkup: "fluid.identity({that}.options.markup.container)",
             renderContainer: "fluid.containerRenderingView.renderContainer({that}, {that}.renderMarkup, {that}.addToParent)",
             addToParent: {
-                funcName: "fluid.containerRenderingView.addToParent",
-                args: ["{that}.options.parentContainer", "{arguments}.0", "append"]
+                funcName: "fluid.newViewComponent.addToParent",
+                args: ["{that}.options.parentContainer", "{arguments}.0", "{that}.options.injectionType"]
             }
         }
     });
 
-    /**
-     * Used to add an element to a parent container. Internally it can use either of jQuery's prepend or append methods.
-     *
-     * @param {jQuery|DOMElement|Selector} parentContainer - any jQueryable selector representing the parent element to
-     *                                                       inject the `elm` into.
-     * @param {DOMElement|jQuery} elm - a DOM element or jQuery element to be added to the parent.
-     * @param {String} method - (optional) a string representing the method to use to add the `elm` to the
-     *                          `parentContainer`. The method can be either "append" (default) or "prepend".
-     */
-    fluid.containerRenderingView.addToParent = function (parentContainer, elm, method) {
-        method = method || "append";
-        $(parentContainer)[method](elm);
-    };
-
     /**
      * Renders the components markup and inserts it into the parent container based on the addToParent method
      *
@@ -85,4 +87,46 @@ var fluid_3_0_0 = fluid_3_0_0 || {};
         return container;
     };
 
+    /**
+     * Similar to fluid.newViewComponent; however, it will fetch a template and render it into the container.
+     *
+     * The template path must be supplied either via a top level `template` option or directly to the
+     * `resources.template` option. The path may optionally include "terms" to use as tokens which will be resolved
+     * from values specified in the `terms` option.
+     *
+     * The template is fetched on creation and rendered into the container after it has been fetched. After rendering
+     * the `afterRender` event is fired.
+     */
+    fluid.defaults("fluid.templateRenderingView", {
+        gradeNames: ["fluid.newViewComponent", "fluid.resourceLoader"],
+        resources: {
+            template: "fluid.notImplemented"
+        },
+        injectionType: "append",
+        events: {
+            afterRender: null
+        },
+        listeners: {
+            "onResourcesLoaded.render": "{that}.render",
+            "onResourcesLoaded.afterRender": {
+                listener: "{that}.events.afterRender",
+                args: ["{that}"],
+                priority: "after:render"
+            }
+        },
+        invokers: {
+            render: {
+                funcName: "fluid.newViewComponent.addToParent",
+                args: ["{that}.container", "{that}.resources.template.resourceText", "{that}.options.injectionType"]
+            }
+        },
+        distributeOptions: {
+            "mapTemplateSource": {
+                source: "{that}.options.template",
+                removeSource: true,
+                target: "{that}.options.resources.template"
+            }
+        }
+    });
+
 })(jQuery, fluid_3_0_0);

tests/framework-tests/core/html/NewViewSupport-test.html

@@ -15,6 +15,8 @@
         <script src="../../../../src/framework/core/js/FluidIoC.js"></script>
         <script src="../../../../src/framework/core/js/DataBinding.js"></script>
         <script src="../../../../src/framework/core/js/FluidView.js"></script>
+        <script src="../../../../src/framework/core/js/FluidRequests.js"></script>
+        <script src="../../../../src/framework/core/js/ResourceLoader.js"></script>
         <script src="../../../../src/framework/core/js/NewViewSupport.js"></script>
 
         <!--  These are the jqUnit test js files -->
@@ -58,8 +60,16 @@ <h2 id="qunit-userAgent"></h2>
             <li class="original">original</li>
         </ul>
 
+        <ul class="flc-newViewSupport-addToParent-replace">
+            <li class="original">original</li>
+        </ul>
+
         <div class="flc-newViewSupport-parentContainer"></div>
 
+        <div class="flc-newViewSupport-templateContainer">
+            <div class="flc-newViewSupport-templateContainer-existing">Existing</div>
+        </div>
+
      </div>
 
     <script>

tests/framework-tests/core/js/NewViewSupportTests.js

@@ -49,11 +49,11 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             elm: $("<li>last</li>")
         }];
 
-        jqUnit.test("fluid.containerRenderingView.addToParent", function () {
+        jqUnit.test("fluid.newViewComponent.addToParent", function () {
             var parent = $(".flc-newViewSupport-addToParent");
 
             fluid.each(fluid.tests.newViewComponent.addToParentCases, function (testCase) {
-                fluid.containerRenderingView.addToParent(parent, testCase.elm, testCase.method);
+                fluid.newViewComponent.addToParent(parent, testCase.elm, testCase.method);
             });
 
             var children = parent.children();
@@ -62,6 +62,16 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             jqUnit.assertEquals("The element added without a method should be last", "last", children.eq(3).text());
         });
 
+        jqUnit.test("fluid.newViewComponent.addToParent replace content", function () {
+            var parent = $(".flc-newViewSupport-addToParent-replace");
+
+            fluid.newViewComponent.addToParent(parent, "<li>new</li>", "html");
+
+            var children = parent.children();
+            jqUnit.assertEquals("There should only be one child element", 1, children.length);
+            jqUnit.assertEquals("The new element should be the child", "new", children.eq(0).text());
+        });
+
         fluid.defaults("fluid.tests.containerRenderingView", {
             gradeNames: ["fluid.containerRenderingView"],
             parentContainer: ".flc-newViewSupport-parentContainer",
@@ -78,5 +88,32 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
             jqUnit.assertNodeExists("The container should have been rendered", containerElm);
             jqUnit.assertDomEquals("The container should have the correct element", containerElm, that.container);
         });
+
+        fluid.defaults("fluid.tests.templateRenderingView", {
+            gradeNames: ["fluid.templateRenderingView"],
+            container: ".flc-newViewSupport-templateContainer",
+            template: "../data/testTemplate1.html"
+        });
+
+        fluid.tests.templateRenderingView.verifyInit = function (container) {
+            var children = container.children();
+            jqUnit.assertEquals("There should be two child elements in the container", 2, children.length);
+            jqUnit.assertTrue("The first child should be the pre-existing element", children.eq(0).hasClass("flc-newViewSupport-templateContainer-existing"));
+            jqUnit.assertTrue("The second child should be the injected template", "Test Template 1", children.eq(1).text());
+            jqUnit.start();
+        };
+
+        jqUnit.asyncTest("Init fluid.templateRenderingView", function () {
+            jqUnit.expect(3);
+            fluid.tests.templateRenderingView({
+                listeners: {
+                    "afterRender.test": {
+                        listener: "fluid.tests.templateRenderingView.verifyInit",
+                        args: "{that}.container",
+                        priority: "last:testing"
+                    }
+                }
+            });
+        });
     };
 })(jQuery);