Как заполнить html-контент в div из результата json, используя компонент amp-bind

Question

Я пробовал следующее

Результат Json

{
 "details":"<h1>Heading</h1><p>Description</p>"
}

<amp-state id="remoteData" src="/api/get-result" >
</amp-state>

<div [text]="remoteData.details"></div>

Теперь его показ, как показано ниже

<div [text]="remoteData.details"><h1>Heading</h1><p>Description</p></div>

HTML-теги перечислены в виде текста. На самом деле результат json исходит из вызова API. Есть ли способ добиться этого.

Я также пытался загрузить его с помощью amp-iframe. Создал дополнительную страницу на сервере и назвал ее с помощью iframe. Содержимое загружается правильно, но я не могу изменить размер div в зависимости от высоты содержимого, поскольку оба источника одинаковы.

<amp-iframe width="200" id="myframe" height="40" layout="responsive" resizable sandbox="allow-scripts " frameborder="0"                                         src="https://demo.com/api/get-html"></amp-iframe>

скрипт, используемый для динамической установки высоты родительского компонента amp-iframe

<script>
window.parent.postMessage({
    sentinel: 'amp',
    type: 'embed-size',
    height: document.body.scrollHeight
}, '*');
</script>

Используя amp-bind, я не могу отобразить html-контент, используя amp-iframe, я не могу настроить высоту iframe в соответствии с содержимым. Может кто-нибудь помочь, пожалуйста.

Спасибо

Answer 1

Вы можете сделать это с помощью шаблона amp-list / mustache. однако вы все еще ограничены определенной высотой. и вы не можете ввести произвольный HTML. Лучше рендерить контент на стороне сервера.

если вы отформатируете свой JSON так:

{
    "items" : [ { 
        "heading":"Heading",
        "description":"Description",
        "listItems": ["one", "two", "three"]
    } ]
}

Усы шаблон.

<amp-list width="auto" height="50" src="https://myserver/stuff/remoteData.json" max-items="1">
    <template type="amp-mustache">
        <h1>{{heading}}</h1>
        <p>{{{description}}}</p>
        {{#listItems}}
            <li>{{.}}</li>
        {{/listItems}}
    </template>
</amp-list>