12

同じページに Mustache.js を介してレンダリングされるいくつかの小さなテンプレート文字列があります。テンプレート用に別の html ファイルを作成する必要はありません。

テンプレートを保存するためのオプション:

  1. JavaScript 変数への保存: ハック的な複数行の文字列、引用符のエスケープが多い。

  2. 非表示の div の innerHTML として保存します。

方法 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 テンプレートを保存するための他の良いトリックは何ですか?

4

4 に答える 4

27

次のようにレンダリングされないように、スクリプトタグに保存します。

<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);
于 2012-11-28T11:46:44.870 に答える
6

タグの使用<script>はこれに最適です。

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

それは実際にはドロップイン交換であり、あなたのvar template = $('#tableTemplate').html();

于 2012-11-28T11:47:18.207 に答える