使用amp-list组件如何访问JSON响应中items数组外的属性？

要访问totalResults和Response这类Search数组外的根级属性，你需要调整amp-list的数据源配置，结合Mustache模板的区块语法来实现：

1. 修改amp-list的items属性为.，让组件使用整个JSON响应对象作为数据源，而不是仅指向Search数组。
2. 在Mustache模板中，直接通过{{totalResults}}、{{Response}}访问根级属性，再用{{#Search}}区块语法遍历数组渲染列表项。

示例代码如下：

<amp-list ... items=".">
  <template type="amp-mustache">
    <!-- 展示根级属性 -->
    <div class="results-info">
      <p>总结果数: {{totalResults}}</p>
      <p>请求状态: {{Response}}</p>
    </div>

    <!-- 遍历Search数组渲染列表内容 -->
    {{#Search}}
      <div class="movie-item">
        <p>{{Title}} - {{Year}}</p>
        {{#Poster}}
          <amp-img src="{{Poster}}" alt="{{Title}}" width="300" height="450" layout="responsive"></amp-img>
        {{/Poster}}
      </div>
    {{/Search}}
  </template>
</amp-list>

关键说明： #

• items="."：指定amp-list使用完整的JSON响应对象，而非仅其中的某个子数组。
• Mustache区块语法{{#Search}}...{{/Search}}：当Search数组存在时，会遍历数组中的每个元素，区块内部可以直接访问元素的属性（如Title、Year）。
• 根级属性（如totalResults）可以在区块外部直接通过Mustache变量调用。

内容的提问来源于stack exchange，提问作者chillywilly