javascript - 両方が1つのhtmlファイルで定義されている場合、別のテンプレートからのMustacheテンプレートの再利用

Question

両方が同じhtmlファイル内の別々のタグ内で定義されている場合、どのようにして別のテンプレートから1つのテンプレートを呼び出して使用できますか？

私はこれが異なる.mustacheファイルで確かに可能であることを知っています。

Answer 1

テンプレートと同じ HTML ファイルで定義されているパーシャルを使用する方法を尋ねていると思います。この例では、2 つの別々のテンプレートで同じパーシャルを使用して、それを示しています。別の例を探していた場合はお知らせください。

ここに 2 つの異なるテンプレートと 1 つの部分があります

<script type=text id=tpl1>
    {{greeting}} {{> planet}}
</script>

<script type=text id=tpl2>
    {{planet}}
</script>

<script type=text id=tpl3>
    {{> planet}} {{goal}}
</script>​

これらのテンプレートを見つけてデータを準備し、再利用されたパーシャルでレンダリングする JavaScript を次に示します。

// get template html
var tpl1 = $('#tpl1').html(),
    tpl2 = $('#tpl2').html(), // partial
    tpl3 = $('#tpl3').html(),
// define data for each template
    tpl1Data = { 'greeting' : 'hello'},
    tpl2Data = { 'planet' : 'world'},
    tpl3Data = { 'goal' : 'peace'},
// define partial object
    partial = {'planet' : tpl2 },
// render to html combining template view and partial view and defining partial
    html1 = Mustache.to_html(tpl1, jQuery.extend(tpl1Data, tpl2Data), partial),
    html2 = Mustache.to_html(tpl3, jQuery.extend(tpl3Data, tpl2Data), partial);
// write compiled Mustache templates to document
document.write(html1 + ', let\'s try for ' + html2);

この例は jsFiddle で完全に機能しているのを見ることができます。

2 番目のテンプレートのパーシャルに別のデータを使用する場合は、次のようなものを定義tpl2bData = { 'planet' : 'mars' }して、レンダリング時に参照するだけhtml2です。

html2 = Mustache.to_html(tpl3, jQuery.extend(tpl3Data, tpl2bData), partial);