I have some small template strings, which will be rendered through Mustache.js on the same page.I need not create seperate html files for templates.

Options for storing the templates :

  1. Storing in javascript variables : Hackish multiline strings, lots of escaping of quotes.

  2. Storing as innerHTML of hidden divs.

I tried method#2, but it does not seem to work correctly.

Fiddle: http://jsfiddle.net/RHwnq/2/

<html>
<head></head>
<body>
<div id='templates' class='hide' align="">
         <div id='tableTemplate'>
            <table class="table">
                 {{#name_list}}
                  <tr><td> {{name}} </td></tr>
                {{/name_list}}
            </table>
         </div>
</div>

<script>
 var template = $('#tableTemplate').html();
 console.log(template);
</script>

</body>
</html>

This logs :

{{#name_list}}
  {{name}} 
{{/name_list}}
<table class="table"><tbody><tr><td></td></tr></tbody></table>

Instead of :

  <table class="table">
                     {{#name_list}}
                      <tr><td> {{name}} </td></tr>
                    {{/name_list}}
  </table>

This might be to due to some markup correction by the browser. What are other good tricks to store HTML templates within an HTML page ?

javascript mustache
Edit
Report