El amp-bind se realiza de tal manera que cualquier documento que lo use tenga un estado o datos JSON mutables. Estos datos se pueden manipular usando amp-state. Sus datos no se evalúan en la carga de la página, sino que se evalúan dinámicamente junto con la entrada del usuario. Tiene varios estados y ellos tienen su propia variable. En este artículo hablaremos del estado inicial de los elementos.
La inicial de una variable de estado de amplificador siempre es NULL, pero se puede cambiar cuando el usuario interactúa con la página.
Configuración: para usar amp-bind-macro en nuestra página AMP, debemos importar el script amp-bind en el encabezado del documento.
HTML
<script async custom-element="amp-bind" src= "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script>
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-bind</title>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-bind/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 amp-bind component in header -->
<script async custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-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>
h1 {
color: forestgreen;
text-align: center;
}
</style>
</head>
<body>
<div style="padding: 1em; color: crimson;">
<amp-state id="myText">
<script type="application/json">
"Geek"
</script>
</amp-state>
<div>1. Hello <span ="undefinedText">
Geek</span>
</div>
<div>2. Hello <span ="myText">
Geek</span>
</div>
<br>
<button on="tap:AMP.setState({
myText: 'GeeksForGeeks'
})">
Change state
</button>
</div>
</body>
</html>
Producción:
En el ejemplo anterior, un saludo se vincula dentro de un estado de amplificador a través de una string JSON. Cuando el usuario activa una acción AMP.setState(…), ambos enlaces se evaluarán y el primer enlace mostrará un valor nulo.
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA