amp-render

Introduction

The amp-render component provides a simple way to load JSON from a server and render it using a mustache template.

Setup

First, you need to import the script for the amp-render extension.

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

When you use amp-render, you'll almost certainly also want to use amp-mustache.

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

In the final example on this page, we'll also be using amp-script, so we'll import that extension's script as well.

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

Basic example

Here's a basic example, applying a simple template to a simple JSON object. The JSON looks like this:

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

Here's the <amp-render> and the <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>

Apri questo frammento in playground

Iterating through a list

In this example, we drill down to access a sub-object of some more elaborate JSON. Our template then iterates through elements of the array that sub-object contains.

<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>

Apri questo frammento in playground

Using more attributes

Now, let's try some more attributes.

binding: binding="never" tells AMP there's no need to evaluate amp-bind bindings in this template. This is more efficient, especially as our template contains no bindings.
key: this allows us to choose a child of the JSON object, and apply that to the template instead of the entire object.
template: this lets us specify a template that's not a child of the 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>

Apri questo frammento in playground

Using amp-script

amp-render can also use amp-script as a data source. In this example, instead of using the key attribute, we fetch the city data with our own JavaScript, then extract the desired sub-object. To learn more about fetching data with amp-script, see this amp-script example.

<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/static/samples/json/cities.json') .then(resp => resp.json()) .then(findContinentsData) } function findContinentsData(json) { return json.planets.earth.continents; } exportFunction('fetchData', fetchData); </script>

Apri questo frammento in playground

Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow

Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub

Written by @morss