HTML text in [text] when using amp-state

问题

I have a simple JSON file:

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

That I reference using amp-state

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

I am then binding the result of this into an HTML container.

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

</div>

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

</div>

My issue is the content text comes out literately, and doesn't render the actual HTML. Is there an equivalent of ASP.NET Razor syntax @HTML.Raw when using AMP?

I've tried encoding and escaping the HTML in the JSON file, but this doesn't work.

I know I might be able to achieve this using AMP-List and amp-mustache, however this adds extra containers which I'd like to avoid.

回答1:

You can not achieve your goal using amp-state because due to security reasons, binding to innerHTML is disallowed. for more information you can visit : amp-bind

[text] attribute for text elements only and use Node.textContent

The Node.textContent property represents the text content of a node and its descendants.

For more infomation

Example of textContent and 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>

回答2:

This isn't possible right now as you're unable to bind to innerHTML with amp-bind per the specifications (See notes on binding here).

Your best option would be to do something like this, or utilize amp-mustache and amp-list like you mentioned as author written JavaScript expressions are not allowed.

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>

来源：https://stackoverflow.com/questions/53097430/html-text-in-text-when-using-amp-state

标签

amp-html