Question

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

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

服务器解析html模板并使用服务器数据进行渲染
服务器构建的客户端下载页面（已经由服务器端的胡子呈现），我想在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 = ['[[', ']]'] ;

那么你是否知道如何忽略渲染中的标记，例如'script'？

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

如何使用MustacheJS忽略标记

1 个答案: