AMP：数据加载回调函数的放大器状态

Question

是否有办法知道“ amp-state”何时已从“ src”中指定的服务器URL接收到响应数据。就像onLoad回调函数一样。这样我就可以在使用“ amp-list”呈现数据之前处理该数据。

<amp-state
      id="myList"
      src="https://company.com/list">
</amp-state>

Answer 1

您可以通过使用amp-list执行处理渲染数据来隐式地执行此操作：

<amp-state
      id="myList"
      src="https://company.com/list">
</amp-state>
<amp-bind-macro
  id="process"
  arguments="listItems"
  expression="listItems.map(item => ...)"
></amp-bind-macro>
<amp-list [src]="process(myList)" ..>
</amp-list>

您无需在此处使用amp-bind-macro，但是它使内容更具可读性。

另一个选择是使用amp-script来获取数据并更新状态：

<amp-script height="1" width="1" script="fetch-script">
</amp-script>

<script id="fetch-script" type="text/plain" target="amp-script">
  console.log('fetching');
  fetch('https://preview.amp.dev/static/samples/json/examples.json')
    .then(response => response.json())
    .then(json => AMP.setState({myList: json.items}))
</script>

<amp-list layout="fixed-height" height="0" binding="no" [src]="myList" [is-layout-container]="true"
  items=".">
  <template type="amp-mustache">
    <div><a href="{{url}}">{{title}}</a></div>
  </template>
</amp-list>

<button on="tap:AMP.setState({})">Click to evaluate bindings</button>