HTMLページ内にHTMLテンプレートを正しく保存するにはどうすればよいですか？

私は同じページ上でMustache.jsを通してレンダリングされるいくつかの小さなテンプレート文字列を持っています。テンプレートのために別々のhtmlファイルを作成する必要はありません。テンプレートを保存するためのHTMLページ内にHTMLテンプレートを正しく保存するにはどうすればよいですか？

オプション：

javascriptの変数に保存する：ハック複数行の文字列を、引用符のエスケープがたくさん。
隠し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テンプレートを保存するその他の良い方法はありますか？

出典

2012-11-28 DhruvPathak

同じファイルに保存しないでAJAX経由で読み込むのはどうですか？ – feeela

@feeelaいいえ、私は2-3の小さな文字列をロードするためにajax呼び出しをしたくないので、私は同じページにそれらを格納するつもりです。 – DhruvPathak

backbone.js/underscore.jsに関連するチュートリアルでは、タグ内にテンプレートを保存しました。この質問を詳しく見てみましょう：http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script – Marc

私は、スクリプトタグに格納するので、彼らはこのように、レンダリングされません：あなたは、このようにそれらを参照することができ

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

：<script>タグを使用して

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

出典

2012-11-28 11:46:44

Ha、秒で同じソリューション:) –

FMLは私を救った一日中。 – Worthy7

は素晴らしい作品このため：

<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-28 11:47:18

IDEによっては、<script></script>ブロック内にHTML構文のハイライトが表示される場合とされない場合があります。私はあなたがやったようdivブロックを使用しますが、CSSに

#templates {display: none;}

を追加します。

出典

2017-08-17 18:17:30 abalter

HTMLページ内にHTMLテンプレートを正しく保存するにはどうすればよいですか？

答えて

関連する問題