繁体   English   中英

在 mustachejs 中以未转义的 html 呈现变量

[英]render a variable in unescaped html in mustachejs

我知道使用 3 个括号会转义 html 但是如果这个 html 有一个我想要呈现的变量,例如

{
 body: "<p> this is a {{message}} </p>",
 message: "Hello World"
}
{{{ body }}}

渲染

this is a

我希望它是

this is a Hello World

如果要获取对象本身的值,则需要使其返回要在可以引用this的函数调用中构建的字符串

下面显示的 wat 是普通的 javascript。

<p id="test"></p>

<script>
    var item = {
     message: "Hello World",
     get body() { 
        return "<p> this is a " + this.message + "</p>" 
      }
    };

    document.getElementById("test").innerHTML = item.body;
</script>

参考链接: https : //clubmate.fi/self-referencing-object-literal-in-javascript/

根据文档,这是不可能的:

拉姆达

当值是一个可调用对象时,例如函数或 lambda,该对象将被调用并传递文本块。 传递的文本是未渲染的文字块。 {{tags}}不会被扩展 - lambda 应该自己做。 通过这种方式,您可以实现过滤器或缓存。

但是,由于您可以使用函数进行渲染,因此很容易在渲染的函数中包含消息:

 let view = { message: "message in a bottle 🎶", body() { return `<p> this is a ${this.message}. </p>` } } let output = Mustache.render("{{{ body }}}", view) console.log(output)
 <script src="https://cdn.jsdelivr.net/gh/janl/mustache.js@v3.1.0/mustache.min.js"></script>

如果您的目标只是将您的身体包裹在<p> ,那么最优雅(并且适合doc )的解决方案是:

 let view = { message: "message in a bottle 🎶", body() { return (text, render) => `<p>${render(text)}</p>` } } let output = Mustache.render(` {{#body}} This is a {{message}}. {{/body}} `, view) console.log(output)
 <script src="https://cdn.jsdelivr.net/gh/janl/mustache.js@v3.1.0/mustache.min.js"></script>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM