Как правильно хранить HTML-шаблон на HTML-странице?

у меня есть несколько небольших строк шаблона, которые будут отображаться через усы.JS на той же странице.Мне не нужно создавать отдельные HTML-файлы для шаблоны.

опции для хранения шаблонов:

  1. хранение в переменных javascript: хакерские многострочные строки, много экранирования кавычек.

  2. хранение как innerHTML скрытых divs.

я попробовал Метод#2, но он, похоже, не работает правильно.

Скрипка: 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>

Это журналы :

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

вместо :

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

это может быть связано с некоторой коррекцией разметки браузером. Каковы другие хорошие приемы для хранения HTML-шаблонов на HTML-странице ?

10
javascript mustache

3 ответов

Я храню их в теге скрипта, поэтому они не отображаются, например:

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

затем вы можете ссылаться на них такой:

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

используя <script> теги отлично подходит для этого:

<script id="tableTemplate" type="text/html">
  <table class="table">
    {{#name_list}}
    <tr><td> {{name}} </td></tr>
    {{/name_list}}
  </table>
</script>

это на самом деле замена drop-in, она будет работать с вашим var template = $('#tableTemplate').html();

6

В зависимости от вашей IDE вы можете или не можете получить подсветку синтаксиса HTML в <script></script> блоки. Я использую div блок, как вы сделали, но добавить

#templates {display: none;}

в CSS.

1