Question

我在页面html中发送我的Mustache模板（不作为单独的请求）。在mustache.js中是否有一种方法可以避免在只有开头标记不同时重复元素的内部内容？

例如，在无浏览器的环境中，我可以使用这个设计模板：

{{#Person}}
<div class="hasperson">
{{/Person}}
{{^Person}}
<div class="noperson">
{{/Person}}
    <p>This line is the same regardless</p>
</div>

但是在浏览器中，使用mustache.js，我发现我必须执行以下操作，以便浏览器在Mustache有机会渲染之前不会抽取模板html：

{{#Person}}
<div class="hasperson">
    <p>This line is the same regardless</p>
</div>
{{/Person}}
{{^Person}}
<div class="noperson">
    <p>This line is the same regardless</p>
</div>
{{/Person}}

我考虑使用partial，它仍然需要div的结束标记重复（不是一点点交易），但我想避免这种情况。

Answer 1

为了防止像你描述的那样阻止HTML解析器修改，我通常将我的客户端模板作为纯文本传输，然后使用模板引擎渲染它们并将它们注入到DOM中。如果您希望它们在同一个doc中而不需要单独的请求来获取它们，您可以使用text/plain（或其他非可执行的）类型属性将它们包装在脚本标记中，然后您可以通过脚本的innerText。

    <!-- ... -->
    <script id="person-template" type="text/plain">
        {{#Person}}
        <div class="hasperson">
        {{/Person}}
        {{^Person}}
        <div class="noperson">
        {{/Person}}
            <p>This line is the same regardless</p>
        </div>
    </script>
    <!-- ... -->

此处有一个类似的示例，包含更完整的示例代码：https://github.com/janl/mustache.js/#include-templates

Mustache.js：当只打开标签时，如何避免重复内部内容？

1 个答案: