4

通过尝试构建小部件模块，我目前面临 MustacheJS 模板的问题。

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

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

但问题是，由于服务器端的变量为空，因此模板 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 = ['[[', ']]'] ;

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

4

2 回答 2

15

在 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-->
于 2012-09-11T03:12:27.150 回答
0

可能这不是最好的解决方案，但是如果您在服务器端替换为正确的值，它就可以工作。IE

{{#links}}
{{/links}}

你想在服务器端忽略，创建元素

{{Sublink}}
{{ClSublink}}

在服务器端用“链接”替换这个值

Sublink = {{#link}}
ClSublink = {{/links}}

它有效，对我来说，使用三重大括号不起作用:(，但这种方式效果很好。

于 2018-05-11T09:58:47.890 回答