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另一种方法是使用任何 jQuery 的、等方法加载外部 HTML 文件$.getJSON。这里给出了更详细的实现。
于 2012-07-04T13:31:51.257 回答
1

You may put templates in separate files like you do with CSS and JS. You can use Chevron to load external templates from files like so:

You add in you template a link to your template file:

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

Then, in you JS you can render your template like so:

$("#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)
});

The docs of Chevron will give more examples

于 2012-08-04T19:22:51.443 回答
1

2018 年使用 fetch 而不是 jQuery 的替代方案：

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 回答