How can I automatically bind amp state (from remote source)?

Question

My amp page has a state as follows:

<amp-state id="remoteData" src="https://remoteDataurl.com">
  <script type="application/json">
    {
      "name": "Foo",
      "email": "[email protected]"
    }
  </script>
</amp-state>

I would like to bind the response to an element in the page:

  <p [text]="'Hello ' + remoteData.name"> ... </p>
  <p [text]="'Your email is ' + remoteData.email"> ... </p>

The text is actually already bound, but it will not refresh until an event occurs on the page.

How can I get it to refresh the state automatically?

Answer 1

I believe <amp-state> does not give you this functionality.

My solution for now is to use <amp-list> with the following attributes.

<amp-list 
  layout="fixed-height"
  height="80"
  src="https://remoteDataurl.com"
  single-item 
  items="."
>
  
  <template type="amp-mustache">
    <p> Hello {{ name }} </p>
    <p> Your email is {{ email }} </p>
  </template>

</amp-list>

Answer 2

You can do it that way.

<amp-state
    id = "product"
    src="https://www.alectrico.cl/listas/designer&productos.json">   
</amp-state>

The state "product" now it's linked to some url from outside.