HTML-текст в [текст] при использовании amp-state - PullRequest
Новая
       5

HTML-текст в [текст] при использовании amp-state

0 голосов
/ 01 ноября 2018

У меня есть простой файл JSON: 

{
  "title": "Title here",
  "content": "<p>line 1<br/>line 2</p>"
}

На что я ссылаюсь, используя amp-state 

<amp-state id="remoteContent" src="//mysite.local/json/remoteContent.json"></amp-state>

Затем я связываю результат этого в контейнер HTML. 

<div class="title" [text]="remoteContent.title">

</div>

<div class="content" [text]="remoteContent.content">

</div>

Моя проблема в том, что текст контента получается буквально и не отображает фактический HTML. Существует ли эквивалент синтаксиса ASP.NET Razor @ HTML.Raw при использовании AMP?

Я пробовал кодировать и экранировать HTML в файле JSON, но это не работает.

Я знаю, что мог бы достичь этого, используя AMP-List и amp-mustache, однако это добавляет дополнительные контейнеры, которых я бы хотел избежать.

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Сейчас это невозможно, так как вы не можете привязать к innerHTML с помощью amp-bind согласно спецификациям (см. Примечания по связыванию здесь ).

Лучшим вариантом было бы сделать что-то подобное или использовать amp-mustache и amp-list , как вы упомянули в качестве написанных автором выражений JavaScript, не допускаются.

RemoteContent State: 

{
  "title": "Title here",
  "item1": "Line 1"
  "item2": "Line 2"
  "item3": "Line 3"
}

Markup: 

<div>
  <p [text]="remoteContent.title"></p>
  <p [text]="remoteContent.item1"></p>
  <p [text]="remoteContent.item2"></p>
  <p [text]="remoteContent.item3"></p>
</div>
0 голосов
/ 02 ноября 2018

Вы не можете достичь своей цели, используя amp-state, поскольку по соображениям безопасности привязка к innerHTML запрещена. Для получения дополнительной информации вы можете посетить: amp-bind

[text] атрибут только для текстовых элементов и используйте Node.textContent

Свойство Node.textContent представляет текстовое содержимое узла и его потомков.

Для получения дополнительной информации

Пример textContent и innerHTML 

<div id="divA"></div>
<div id="divB"></div>
<script>
document.getElementById("divA").textContent = "<b>This is some text</b>";
document.getElementById("divB").innerHTML = "<b>This is some text</b>";
</script>
...