Instrucciones amp-bind
amp-bind
El componente Amp-bind le permite agregar interactividad personalizada a sus páginas más allá de los componentes pre-construidos de AMP.
Funciona mediante la mutación de elementos en respuesta a las acciones del usuario a través de enlace de datos y JS-como expresiones.
Por ejemplo, amp-bind puede usarse para:
- Enlace dos componentes amp-carousel en una galería de imágenes con una lista de miniaturas en movimiento.
- Cree una página de producto de comercio electrónico donde la interfaz de usuario cambie si el elemento seleccionado actualmente del usuario no está disponible.
Agregar
Importe el componente amp-bind justo abajo de la apertura <head>
Configuración del estado inicial
El componente amp-bind funciona vinculando elementos a un "estado" implícito de JSON. Este estado se puede inicializar con uno o más componentes <amp-state>.
La referencia del estado implícito en las expresiones de enlace se realiza mediante la sintaxis de punto o allAnimals.dog.imageUrl, allAnimals.dog.imageUrl por el id del elemento <amp-state>, por ejemplo, allAnimals.dog.imageUrl o allAnimals['cat']['imageUrl'] .
- El contenido de <amp-state> debe ser un solo script JSON.
- De forma similar a la configuración <amp-analytics>, colocar metadatos al final del documento ayuda a que la página se muestre más rápidamente.
Crear enlaces de datos
Un enlace de datos es un enlace entre un elemento HTML y una expresión. Cuando cambia el valor de la expresión, el elemento se actualiza con ese valor.
Se pueden enlazar tres tipos de estado de elemento:
- text para textContent
- class para clases CSS
- Atributos específicos de elementos, por ejemplo, el atributo src para amp-img o amp-video.
Para crear un enlace, cree un atributo nuevo en un elemento con la sintaxis:
[attribute]="expression"
Texto de encuadernación
El texto de esta <p> cambiará cuando cambie la variable currentAnimal. El código currentAnimal es una variable de estado no inicializada, que se establecerá cuando se active un cambio de estado (véase más adelante).
Estilos de encuadernación
El estilo se puede cambiar mediante la aplicación de clases CSS, que reemplazará todas las clases de estilo del elemento. En el ejemplo allAnimals, es el id del componente de amp-state anterior y usamos la notación de bracket porque currentAnimal es una variable.
Valores de atributos vinculantes
Varios componentes de AMP admiten valores de atributos de enlace con amp-bind. Por ejemplo, se pueden cambiar las URL de amp-img.
También se puede cambiar la URL src para videos incrustados con amp-video. Por el momento, entre todos los componentes de vídeo AMP, sólo amp-video admite amp-bind
Actualizaciones de activación
Los enlaces de datos son reevaluados cuando los cambios de estado son implícitos. El estado AMP.setState se puede realizar mediante la acción.
- AMP.setState fusiona en el estado nuevo con el estado de AMP.setState
- El estado existente puede sobrescribirse, incluyendo el estado inicializado por componentes amp-state.
Funciona mediante la mutación de elementos en respuesta a las acciones del usuario a través de enlace de datos y JS-como expresiones.
Por ejemplo, amp-bind puede usarse para:
- Enlace dos componentes amp-carousel en una galería de imágenes con una lista de miniaturas en movimiento.
- Cree una página de producto de comercio electrónico donde la interfaz de usuario cambie si el elemento seleccionado actualmente del usuario no está disponible.
Agregar
Importe el componente amp-bind justo abajo de la apertura <head>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Configuración del estado inicial
El componente amp-bind funciona vinculando elementos a un "estado" implícito de JSON. Este estado se puede inicializar con uno o más componentes <amp-state>.
Ejemplo<amp-state id="allAnimals"> <script type="application/json"> { "dog": { "imageUrl": "/img/Border_Collie.jpg", "videoUrl": "/video/dog-video.mp4", "style": "greenBackground" }, "cat": { "imageUrl": "/img/cat-looking-up-300x200.jpg", "videoUrl": "/video/cat-video.mp4", "style": "redBackground" } } </script> </amp-state>
La referencia del estado implícito en las expresiones de enlace se realiza mediante la sintaxis de punto o allAnimals.dog.imageUrl, allAnimals.dog.imageUrl por el id del elemento <amp-state>, por ejemplo, allAnimals.dog.imageUrl o allAnimals['cat']['imageUrl'] .
- El contenido de <amp-state> debe ser un solo script JSON.
- De forma similar a la configuración <amp-analytics>, colocar metadatos al final del documento ayuda a que la página se muestre más rápidamente.
Crear enlaces de datos
Un enlace de datos es un enlace entre un elemento HTML y una expresión. Cuando cambia el valor de la expresión, el elemento se actualiza con ese valor.
Se pueden enlazar tres tipos de estado de elemento:
- text para textContent
- class para clases CSS
- Atributos específicos de elementos, por ejemplo, el atributo src para amp-img o amp-video.
Para crear un enlace, cree un atributo nuevo en un elemento con la sintaxis:
[attribute]="expression"
Texto de encuadernación
El texto de esta <p> cambiará cuando cambie la variable currentAnimal. El código currentAnimal es una variable de estado no inicializada, que se establecerá cuando se active un cambio de estado (véase más adelante).
Ejemplo<p [text]="'This is a ' + currentAnimal + '.'">This is a dog.</p>This is a dog.
Estilos de encuadernación
El estilo se puede cambiar mediante la aplicación de clases CSS, que reemplazará todas las clases de estilo del elemento. En el ejemplo allAnimals, es el id del componente de amp-state anterior y usamos la notación de bracket porque currentAnimal es una variable.
Ejemplo<p [class]="allAnimals[currentAnimal].style" class="greenBackground">Each animal has a different background color.</p>Each animal has a different background color.
Valores de atributos vinculantes
Varios componentes de AMP admiten valores de atributos de enlace con amp-bind. Por ejemplo, se pueden cambiar las URL de amp-img.
Ejemplo<amp-img src="/img/Border_Collie.jpg" layout="responsive" width="300" height="200" [src]="allAnimals[currentAnimal].imageUrl"> </amp-img>
También se puede cambiar la URL src para videos incrustados con amp-video. Por el momento, entre todos los componentes de vídeo AMP, sólo amp-video admite amp-bind
Ejemplo<amp-video src="/video/dog-video.mp4" layout="responsive" [src]="allAnimals[currentAnimal].videoUrl" width="300" height="170" autoplay controls="true"></amp-video>
Actualizaciones de activación
Los enlaces de datos son reevaluados cuando los cambios de estado son implícitos. El estado AMP.setState se puede realizar mediante la acción.
- AMP.setState fusiona en el estado nuevo con el estado de AMP.setState
- El estado existente puede sobrescribirse, incluyendo el estado inicializado por componentes amp-state.
Ejemplo<button class="ampstart-btn caps m1" on="tap:AMP.setState({currentAnimal: 'cat'})">Set to Cat</button>
Comentarios
Disqus comments:
Facebook comments: