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 :
Storing in javascript variables : Hackish multiline strings, lots of escaping of quotes.
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 ?