我目前在尝试构建小部件模块时遇到 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 = ['[[', ']]'] ;
那么您是否知道如何从渲染中忽略标签,例如“脚本”?
最佳答案
在 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-->
关于node.js - 如何忽略带有 Mustache JS 的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12340986/