動態手風琴

簡介

此程式碼片段示範如何使用 amp-bind 和 amp-list 動態更新 amp-accordion 區段中的資料。

設定

匯入 amp-accordion 元件以在手風琴中顯示內容。

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

匯入 amp-bind 元件以根據使用者輸入更新手風琴狀態。

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

匯入 amp-list 元件以動態顯示熱門或寒冷國家的名稱。

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

匯入 amp-mustache 元件以動態顯示來自 amp-list 的項目。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

實作

input 區段會在選取「熱門」時將 amp-state 設定為 {climate: 1}，並在選取「寒冷」時設定為 {climate: 2}。amp-accordion 預設為隱藏，但當 climate != 0 時 (因此必須選取熱門或寒冷) 才會顯示。

溫暖寒冷

<input type="radio" id="f-option1" name="selector1" role="button" tabindex="0" on="change:AMP.setState({climate:(event.checked) ? 1 : 0})">
<label for="f-option1">Warm</label>
<input type="radio" id="f-option2" name="selector1" on="change:AMP.setState({climate: (event.checked) ? 2 : 0})" role="button" tabindex="0">
<label for="f-option2">Cold</label>

手風琴

每個 amp-accordion 區段都是不同的洲，因此 climateCountries 資料也必須按洲篩選。此篩選在 amp-list 的 [src] 區段中完成。此外，高度會根據篩選狀態中的項目數量動態設定。

climateCountries 的 src 會根據使用者輸入動態變更。如果 {climate == 1}，則 climateCountries 資料會從 hot.json 檔案中提取。否則，如果 {climate == 2}，則 climateCountries 資料會從 cold.json 檔案中提取

<div id="accordion" [hidden]="climate == 0" hidden>
  <p>The accordion below lists countries, organized by continent, that match the climate you chose. </p>
  <amp-state id="climateCountries" [src]="climate == 1 ? '/static/samples/json/hot.json': climate == 2 ? '/static/samples/json/cold.json': ''">
  </amp-state>
  <amp-accordion>
    <section>
      <h4>
        Asia
      </h4>
        <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'Asia')" [is-layout-container]="true">
          <template type="amp-mustache">
            <ul>
              <span>{{Name}}</span>
            </ul>
          </template>
        </amp-list>
    </section>
    <section>
      <h4>
        Europe
      </h4>
        <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'Europe')" [is-layout-container]="true">
          <template type="amp-mustache">
            <ul>
              <span>{{Name}}</span>
            </ul>
          </template>
        </amp-list>
    </section>
    <section>
      <h4>
        South America
      </h4>
        <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'South America')" [is-layout-container]="true">
          <template type="amp-mustache">
            <ul>
              <span>{{Name}}</span>
            </ul>
          </template>
        </amp-list>
    </section>
    <section>
      <h4>
        North America
      </h4>
        <amp-list layout="fixed-height" height="0" binding="refresh" [src]="climateCountries.countries.filter(country => country.continent == 'North America')" [is-layout-container]="true">
          <template type="amp-mustache">
            <ul>
              <span>{{Name}}</span>
            </ul>
          </template>
        </amp-list>
    </section>
  </amp-accordion>
</div>