Javascript Nested Templates ... Is it Possible / Really?

Question

Is it possible to have nested JavaScript template tags, for example.

<script id="Product" type="text/html"> <div class="product"> .... <div class="features"> <script id="Features" type="text/html"> <div class="feature"> ... </div> </script> </div> ... </div> </script> 

When the Product template is evaluated, the function template is now available as a template that I can call when I'm ready.

When I try to use this method in my browser, I notice that some elements are displayed in the wrong order, as if I forgot the end tag somewhere.

However, when I delete the nested template (Feature), all this is good ...

I wonder if there was a right way to achieve this.

Answer 1

You cannot nest script tags. script work, the browser reads the opening tag, and then begins to collect a line of code without interpreting this code at all. He stops doing this the first time he sees the exact sequence < / s c r i p t > . The browser always stops at the first one found, and to a decisive extent, it ignores any intermediate sequence of open tags, for example, < s c r i p t > . This is due to the fact that the browser does not analyze the script code, and not its operation. This is a division of concern. ( script tags probably shouldn't be tags at all, but rather something more like a CDATA structure, but we have them.)

For example, from a browser perspective:

 <script id="Product" type="text/html"> SCRIPT STARTS HERE <div class="product"> SCRIPT CODE CONTINUES .... SCRIPT CODE CONTINUES <div class="features"> SCRIPT CODE CONTINUES <script id="Features" type="text/html"> SCRIPT CODE CONTINUES (*NOT* START OF SCRIPT) <div class="feature"> SCRIPT CODE CONTINUES ... SCRIPT CODE CONTINUES </div> SCRIPT CODE CONTINUES </script> SCRIPT ENDS </div> ENDING `div` TAG (probably mis-matched) ... </div> </script> MIS-MATCHED ENDING `script` TAG 

Now, if you use some kind of server template engine that replaces script tags with markup, then sends the updated markup to the browser, and then to the template engine, does it support nesting. Browsers do not.

Answer 2

Can i use jQuery? If so, it is very possible (and even, I dare say, general):

http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/

Answer 3

Sometimes it seems to me that I want nested scipt tags for templating, but this is what you need to do instead:

Script 1

  <script id="Product" type="text/html"> <div class="product"> .... <div class="features"> <!-- INSERT FEATURES HERE --> </div> ... </div> </script> 

Script 2

  <script id="Product_Features" type="text/html"> <div class="feature"> </div> </script> 

You can have a 'namespace' ID if you really want to indicate that this is a "child" template. This makes it clearer if it is not intended to be used on its own (obviously, it is up to you if that makes sense or not).

After reading the TJs answer, this became the only obvious alternative to what I initially thought was necessary (nested scripts).

However, you probably do not need nested templates unless you need to choose which 'child' template to which. If there is only one possible layout for a child template, just use "foreach" according to your template engine.

Answer 4

You can use <style type="text/html"></style> or <noscript></noscript> to wrap the <script></script> .

I think <noscript> better than <style>

example:

 <noscript id="s"> <div class="r"> <p>{%= o.rand %}</p> <script> console.log('sdf'); </script> </div> </noscript> 

 <style id="s" type="text/html"> <div class="r"> <p>{%= o.rand %}</p> <script> console.log('sdf'); </script> </div> </style> 

Answer 5

Try the following:

 <script id="Product" type="text/html"> <!-- <div class="product"> .... <div class="features"> <script id="Features" type="text/html"> <div class="feature"> ... </div> </script> </div> ... </div> --> </script> 

When you need to get it:

 document.getElementById("Product").text.replace(/(?:^\s*<!--\s*)|(?:\s*-->\s*$)/g, "");