node.js - 如何忽略带有 Mustache JS 的标签

Question

我目前在尝试构建小部件模块时遇到 MustacheJS 模板问题。

事实上，我使用了我的 html 模板两次:

• 服务器解析 html 模板并使用服务器数据渲染它
• 由服务器构建的客户端下载页面(因此已经在服务器端由 mustache 呈现)，我想在 ajax 请求后在浏览器中应用 Mustache 的第二次呈现。

但问题是，由于服务器端的 vars 是空的，因此模板 html 不会在客户端呈现...

<!-- Rendered on server side -->
<div class="content noise">
    <h4>{{widget.title}}</h4>
    <p>Issues from {{widget.github.author}}/{{widget.github.repo}}</p>
    <div class="issues"></div>
</div>

<!-- I want to render this only on client side -->
<script type="text/template" id="issueTemplate">
{{#links}}
    <a href="{{url}}" {{#selected}}class="Selected"{{/selected}}>{{{name}}}</a>
{{/links}}
</script>

这里 issueTemplate 是空的，因为 {{links}} 在服务器端是空的。

在客户端，我尝试这样的事情，并用“[[”替换“{{”标签，但它没有效果:

self.mu = _.clone(Mustache) ;
self.mu.tags = ['[[', ']]'] ;

那么您是否知道如何从渲染中忽略标签，例如“脚本”？

Answer 1

在 Mustache 中，您可以使用 {{= ... =}} 标签即时更改标签分隔符；您可以使用它通过选择文字中不存在的分隔符来创建文字部分。因此你可以做类似的事情

<!-- Rendered on server side -->
<div class="content noise">
  <h4>{{widget.title}}</h4>
  ...
<!-- I want to render this only on client side -->

{{={{{ }}}=}}
<!-- Now only triple braces will be interpreted as tags on the server side -->
<!-- Double braces will be passed through literally -->

<script type="text/template" id="issueTemplate">
{{#links}}
...
{{/links}}
</script>

{{{={{ }}=}}}
<!-- Now double braces delimit tags again if you need to do more server-side rendering-->