6

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>

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

4

3 に答える 3

6

これを行うにはいくつかのアプローチがあります。

  1. PHPのようなサーバー側のスクリプト言語を使用している場合は.mst、JS内の個別の（拡張子は実際に必要なものであれば何でもかまいません）ファイルにそれらを含めるだけです。たとえば、 var _templateName = <?= JS::mustache('content/templateName.mst') ?>;。したがって、JSが実際にレンダリングされると、マークアップを使用してレンダリングされますが、コードは引き続き保守可能です。さらに、このアプローチでは、CDNを使用している場合、キャッシュされたJSを使用するとサイトに大きなメリットがあります。
  2. $.getもう1つのアプローチは、jQueryの、$.getJSONなどのメソッドのいずれかを使用して外部HTMLファイルをロードすることです。これのより詳細な実装はここにあります。
于 2012-07-04T13:31:51.257 に答える
1

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)
});

シェブロンのドキュメントはより多くの例を与えるでしょう

于 2012-08-04T19:22:51.443 に答える
1

jQueryの代わりにフェッチを使用する2018年の代替案：

fetch('template.mst')
.then(response => response.text())
.then(template => {
    Mustache.parse(template);
    var output = Mustache.render(template, data);
    return document.getElementById('target').innerHTML = output;
}).catch(error => console.log('Unable to get the template: ', error.message));
于 2018-03-23T05:51:06.653 に答える