[英]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.