外部テンプレートを使った口ひげ

Question

私はMustache.jsを使ったテンプレートについて読んでいます。私が理解していないのは、どのようにテンプレートを置くのかです。私は同じファイルでそれらを失うことはありません。

$.get('test.htm', function(templates) { 
    // Fetch the <script /> block from the loaded external 
    // template file which contains our greetings template. 
    var template = $(templates).filter('#tpl-greeting').html(); 
    $('body').append(Mustache.render(template, templateData)); 
}); 


//test.htm 
<script id="tpl-greeting" type="text/html"> 
<dl> 
    <dt>Name</dt> 
    <dd>{{name}}</dd> 
    <dt>Time</dt> 
    <dd>{{timeNow}}</dd> 
</dl> 
</script> 

テンプレートを返すコントローラを作成する必要がありますか、それとも参照できますか？

Answer 1

これを行うにはいくつかの方法があります。

1. あなたはPHPなどのサーバサイドのスクリプト言語を使用している場合は、ちょうどJS内のファイル（拡張子はあなたが実際にしたい何でもかまいません）別々.mstに含めます。たとえば、 var _templateName = <?= JS::mustache('content/templateName.mst') ?>;となります。したがって、JSが実際にレンダリングされるとき、マークアップでレンダリングされますが、コードは引き続きメンテナンス可能です。さらに、このアプローチでは、CDNを使用している場合、サイトはキャッシュされたJSで大幅に利益を得ます。
2. もう1つの方法は、jQueryの$.get,$.getJSONなどの方法で外部HTMLファイルを読み込むことです。これのより詳細な実装はgiven hereです。

Answer 2

テンプレートをCSSとJSのように別々のファイルに入れることができます。あなたはそのようなファイルから外部のテンプレートを読み込むためにChevronを使用することができます：あなたはあなたの中に追加

は、テンプレートファイルへのリンクをテンプレート：

<link href="path/to/template.mustache" rel="template" id="templateName"/> 

次に、あなたの中にあなたがそうのようなテンプレートをレンダリングすることができますJS：

シェブロンの

$("#templateName").Chevron("render", {name: "Slim Shady"}, function(result){ 
    // do something with 'result' 
    // 'result' will contain the result of rendering the template 
    // (in this case 'result' will contain: My name is Slim Shady) 
}); 

ドキュメントは、より多くの例