重用另一个模板中的 Mustache 模板，如果两者都在一个 html 文件中定义

Reusing a Mustache template from another one, if both are defined in one html file

本文关键字：两者都 文件 html 一个 定义 如果 另一个 模板 Mustache      更新时间：2023-09-26

如果两个模板都在同一html文件中的单独标签中定义，如何从另一个模板调用和使用一个模板？

我知道这当然可以用不同的 .mustache 文件来实现。

我相信您是在问如何使用与模板相同的HTML文件中定义的部件。此示例在两个单独的模板中使用相同的部分来演示这一点。如果您正在寻找其他示例，请告诉我。

这是两个不同的模板和一个部分

<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上看到这个完整的例子。

如果要在第二个模板中对部分使用不同的数据，只需定义类似 tpl2bData = { 'planet' : 'mars' } 的内容并在渲染时引用它 html2 .

html2 = Mustache.to_html(tpl3, jQuery.extend(tpl3Data, tpl2bData), partial);
相关文章：