Usamos amp-mustache para renderizar plantillas de bigote. amp-mustache no proporciona los datos JSON que recopilan los componentes amp-list, amp-access o amp-form .
Ejemplo de un archivo JSON pasado con un diccionario usando amp-list .
Javascript
{
"geeksforgeeks": [
{
"fullname": "geeksforgeeks",
"phonenumber": "9999999999",
}
]
}
Script requerido: importar el componente amp-mustache al encabezado.
HTML
<script async custom-template="amp-mustache" src= "https://cdn.ampproject.org/v0/amp-mustache-0.2.js"> </script>
amp-mustache se usa con componentes como amp-list o amp-form para pasar un archivo JSON (ejemplo dado después de la introducción).
Importación del componente amp-list en el encabezado.
HTML
<script async custom-element="amp-list" src= "https://cdn.ampproject.org/v0/amp-list-0.1.js"> </script>
Importación del componente amp-list en el encabezado.
HTML
<script async custom-element="amp-form" src= "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>
Validación: se necesita Theamp-mustache para estar en fragmentos DOM bien enmarcados. Entonces no podemos usar amp-mustache para:
- Calcule el nombre de la etiqueta, por ejemplo, <{{tagName}}>
- Calcular nombre de atributo <div {{attrName}}=attr>
Estos no están permitidos
Ejemplo:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Google AMP amp-mustache</title>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-mustache/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!--Import the `amp-mustache` tag.-->
<script async custom-template="amp-mustache"
src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<script async custom-element="amp-list"
src="https://cdn.ampproject.org/v0/amp-list-0.1.js">
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
</style>
</head>
<body>
<amp-list src="geeks.json"
layout="fixed-height"
height="50" binding="no">
<template type="amp-mustache">
{{fullname}}!
{{#phonenumber}}
your phone number is {{phonenumber}}
{{/phonenumber}}
</template>
</amp-list>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA