使用amp-state时[text]中的HTML文本 [英] HTML text in [text] when using amp-state

问题描述

我有一个简单的JSON文件:

I have a simple JSON file:

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

我使用amp-state引用

That I reference using amp-state

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

然后将其结果绑定到HTML容器中.

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>

我的问题是内容文字有素，并且没有呈现实际的HTML.使用AMP时是否有等效的ASP.NET Razor语法@ HTML.Raw?

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?

我已经尝试过对JSON文件中的HTML进行编码和转义，但这是行不通的.

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

我知道我可以使用AMP-List和amp-mustache来实现这一点，但是这增加了我想避免的额外容器.

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.

推荐答案

目前无法实现，因为您无法按照规范通过amp-bind绑定到innerHTML(请参阅有关绑定此处).

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).

您最好的选择是做类似的事情，或者利用 amp-小胡子和 amp-list 就像您提到的作者一样不允许使用书面的JavaScript表达式.

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.

远程内容状态:

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

标记:

<div>
  <p [text]="remoteContent.title"></p>
  <p [text]="remoteContent.item1"></p>
  <p [text]="remoteContent.item2"></p>
  <p [text]="remoteContent.item3"></p>
</div>

这篇关于使用amp-state时[text]中的HTML文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！