amp-render

簡介

amp-render 元件提供一種從伺服器載入 JSON 並使用 mustache 範本呈現的簡單方法。

設定

首先，您需要匯入 amp-render 擴充功能的指令碼。

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

當您使用 amp-render 時，幾乎可以肯定也會想使用 amp-mustache。

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

在本頁面的最後一個範例中，我們也將使用 amp-script，因此我們也會匯入該擴充功能的指令碼。

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

基本範例

以下是一個基本範例，將簡單的範本套用至簡單的 JSON 物件。JSON 看起來像這樣

{
  "country": "Nigeria",
  "city": "Lagos"
}

以下是 <amp-render> 和 <template>

<amp-render class="sample" src="/static/samples/json/cities-lagos.json" layout="fixed-height" height="60">
  <template type="amp-mustache">
    <div class="line">{{city}} is a city in {{country}}.</div>
  </template>
</amp-render>

在 Playground 中開啟此程式碼片段

逐項處理清單

在此範例中，我們向下鑽研以存取更複雜 JSON 的子物件。然後我們的範本會逐項處理該子物件包含的陣列元素。

<amp-render class="sample" src="/static/samples/json/cities.json" layout="fixed-height" height="105">
  <template type="amp-mustache">
    {{#planets}}
      {{#earth}}
        {{#continents}}
          {{#africa}}
            <div class="line">{{city}} is a city in {{country}}.</div>
          {{/africa}}
        {{/continents}}
      {{/earth}}
    {{/planets}}
  </template>
</amp-render>

在 Playground 中開啟此程式碼片段

使用更多屬性

現在，讓我們嘗試更多屬性。

binding：binding="never" 告知 AMP 無需在此範本中評估 amp-bind 繫結。這樣效率更高，尤其是在我們的範本不包含任何繫結的情況下。
key：這讓我們可以選擇 JSON 物件的子物件，並將其套用至範本，而不是整個物件。
template：這讓我們可以指定一個不是 amp-render 子物件的範本。

<amp-render class="sample" src="/static/samples/json/cities.json" layout="fixed-height" height="105" binding="never" key="planets.earth.continents" template="cities-countries">
</amp-render>
<template id="cities-countries" type="amp-mustache">
  {{#africa}}
    <div class="line">{{city}} is a city in {{country}}.</div>
  {{/africa}}
</template>

在 Playground 中開啟此程式碼片段

使用 amp-script

amp-render 也可以使用 amp-script 作為資料來源。在此範例中，我們不使用 key 屬性，而是使用我們自己的 JavaScript 擷取城市資料，然後提取所需的子物件。若要深入瞭解如何使用 amp-script 擷取資料，請參閱這個 amp-script 範例。

<amp-render class="sample" src="amp-script:dataFunctions.fetchData" layout="fixed-height" height="52">
  <template type="amp-mustache">
    {{#southAmerica}}
      <div class="line">{{city}} is a city in {{country}}.</div>
    {{/southAmerica}}
  </template>    
</amp-render>
<amp-script id="dataFunctions" script="fetch-data-script" nodom></amp-script>
<script id="fetch-data-script" type="text/plain" target="amp-script">
  function fetchData(index) {
    return fetch('https://amp.dev.org.tw/static/samples/json/cities.json')
      .then(resp => resp.json())
      .then(findContinentsData)
  }
  function findContinentsData(json) {
    return json.planets.earth.continents;
  }
  exportFunction('fetchData', fetchData);
</script>

在 Playground 中開啟此程式碼片段

需要進一步說明嗎？

如果本頁面的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能嗎？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

在 GitHub 上編輯範例

由 @morss 撰寫