Mustache模板字符串在渲染为HTML时的应用

Question

我正在使用 Mustache 来渲染模板。

我有这个 JSON 对象：

  {
    title: "Foo bar", 
    content: "<p> Html here </p>", 
    footer: "footer content here"
  }

我有一个 Mustache 模板，如下所示：

  <div id="box">
    <div id="title"> {{title}} </div> 
    <div id="content"> {{content}} </div> 
    <div id="footer"> {{footer}} </div> 
  </div>

我的问题是，变量内容中的HTML没有被渲染，而是直接被打印到屏幕上。

我在非查看源代码的窗口中看到的是：<p>这里是HTML</p>，如果我只查看页面源代码，我只想看到它。

我该如何修复这个问题，使得当我将字符串传递给Mustache模板时，其中的HTML能够被渲染？我调用了mustache.render(templates.all,data); 作为对Mustache的调用。

- Snow_Mac

---

如果您能接受答案并将问题标记为已解决，那就太好了。 - MERose

同意。 - BeNice

Answer 1

根据Mustache文档，默认情况下所有变量都会进行HTML转义。如果您想返回未转义的HTML，请使用三个花括号：{{{name}}}。

因此，在您的模板中只需使用例如{{{content}}}即可。

  <div id="box">
    <div id="title"> {{title}} </div> 
    <div id="content"> {{{content}}} </div> 
    <div id="footer"> {{footer}} </div> 
  </div>

- Amy

---

我知道这是一个旧帖子，但我需要解决这个问题，但不同的是，我想将{{{content}}}分配给一个javascript变量，以便在我的网站内部使用其他javascript文件。 - cmarrero01

如果你想将 content 作为一个变量获取，你需要在调用模板渲染的代码中实现。你无法从已渲染的模板中提取数据。（一种 hack-ish 的方法是先渲染模板，然后使用 documents.querySelector(...).textContent 从 DOM 中提取它） - Amy

@cmarrero01 然后你可以将部分 {{> cnt}} 放入模板中，并将变量对象 {"cnt": content} 作为第三个参数传递给 render 函数。就像这里一样 http://jsfiddle.net/EYDfP/169/ - Dima Fomin