визуализировать переменную в unescaped html в усах - PullRequest
Новая
       10

визуализировать переменную в unescaped html в усах

1 голос
/ 13 февраля 2020

Я знаю, что использование 3 скобок приведет к исчезновению html, но что, если у этого html есть переменная, которую я хочу отобразить, например, 

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

{{{ body }}}

рендеринга 

this is a

Я хочу, чтобы это было 

this is a Hello World

Ответы [ 2 ]

1 голос
/ 13 февраля 2020

Согласно do c, это невозможно:

Lambdas

Когда значение является вызываемым объектом, например функцией или лямбда, объект будет вызван и передан блок текста. Переданный текст является буквенным блоком, не обработанным. {{tags}} расширяться не будет - лямбда должна делать это самостоятельно. Таким способом вы можете реализовать фильтры или кэширование.

Однако, поскольку вы можете использовать функции для рендеринга, легко включить сообщение в вашу визуализированную функцию: 

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>, то самое элегантное (и подходящее для do c) решение будет: 

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>
1 голос
/ 13 февраля 2020

Если вы хотите получить значение самого объекта, вам нужно, чтобы он возвращал строку, которую вы хотите построить в вызове функции, который может ссылаться на 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/

...