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>


<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

This is a dog.

<p [text]="'This is a ' + currentAnimal + '.'">This is a dog.</p>

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

Each animal has a different background color.

<p [class]="allAnimals[currentAnimal].style"   class="greenBackground">Each animal has a different background color.</p>

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>




Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: