Home/ Questions/Q 8901601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T01:23:58+00:00

I have some small template strings, which will be rendered through Mustache.js on the

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I store them in a script tag, so they don’t get rendered, like this:

    <script id="abc-template" type="text/html">
    <h1>{{name}}</h1>
</script>

    You can then reference them like this:

    var template = $('#abc-template').html();
var html = Mustache.to_html(template, data);
$('#abc-div').html(html);
    • 0