如何格式化胡子条件内部字符串以进行胡子 HTML 渲染?

Question

我有一个HTML字符串，我想在Mustache中呈现为HTML。但是，该字符串还包含胡须条件。当我在Chrome Dev Tools中检查呈现的HTML时，似乎条件实际上是在输入元素中打印的，而不是被处理的。我认为这可能是右括号中的正斜杠有问题。在 Chrome Dev Tools 中，/在渲染时会被删除。所以我尝试使用 HTML 十进制代码。那也行不通。

这是我渲染 HTML 字符串的地方：

<span>{{{response.additionalInfo}}}</span>

这是我传递给视图的对象。附加信息属性是具有嵌入式 Mustache 条件的属性：

var response = {
templateType: "optIn",
header: "Opt-In",
additionalInfo: "<label><input type='checkbox' id='notOptIn' name='isOptIn' {{^response.isOptIn}}checked{{/response.isOptIn}}> YES</label>",
isOptIn: false,
}

是否可以在字符串中添加一个 Mustache 条件，Mustache 将呈现为 HTML？如果是这样，如何转义结束标签中的/？

Answer 1

我没有设法通过对 Mustache 的一次调用使其工作。

对于它的价值，我设法通过转换response.additionalInfo模板并将结果存储在response.additionalInfo中来使其工作。

然后我转换了您提供的模板。

isOptIn = false：

var response = {
templateType: "optIn",
header: "Opt-In",
additionalInfo: "<label><input type='checkbox' id='notOptIn' name='isOptIn' {{^response.isOptIn}}checked{{/response.isOptIn}}> YES</label>",
isOptIn: false,
}
var template = "<span>{{{response.additionalInfo}}}</span>";
document.getElementById("run").addEventListener("click", function() {
response.additionalInfo = Mustache.to_html(response.additionalInfo, window);
html = Mustache.to_html(template, window);
document.getElementById("container").innerHTML = html;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
<script src="https://mustache.github.io/extras/mustache.js"></script>
<button id="run">Run</button>
<div id="container"/>

与isOptIn = true：

var response = {
templateType: "optIn",
header: "Opt-In",
additionalInfo: "<label><input type='checkbox' id='notOptIn' name='isOptIn' {{^response.isOptIn}}checked{{/response.isOptIn}}> YES</label>",
isOptIn: true,
}
var template = "<span>{{{response.additionalInfo}}}</span>";
document.getElementById("run").addEventListener("click", function() {
response.additionalInfo = Mustache.to_html(response.additionalInfo, window);
html = Mustache.to_html(template, window);
document.getElementById("container").innerHTML = html;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
<script src="https://mustache.github.io/extras/mustache.js"></script>
<button id="run">Run</button>
<div id="container"/>