Polímero - Sistema de datos

Polymer permite observar los cambios en las propiedades de un elemento tomando diferentes acciones como:

Observers - Invoca las devoluciones de llamada cada vez que cambian los datos.
Computed Properties - Calcula las propiedades virtuales basándose en otras propiedades y las vuelve a calcular cada vez que cambian los datos de entrada.
Data Bindings - Actualiza las propiedades, atributos o el contenido de texto de un nodo DOM usando anotaciones cada vez que cambian los datos.

Rutas de datos

Pathes una cadena en el sistema de datos que proporciona una propiedad o subpropiedad relativa a un ámbito. El alcance puede ser un elemento anfitrión. Las rutas se pueden vincular a diferentes elementos mediante el enlace de datos. El cambio de datos se puede mover de un elemento a otro, si los elementos están conectados con el enlace de datos.

Ejemplo

<dom-module id = "my-profile">
   <template>
      . . .
      <address-card address="{{myAddress}}"></address-card>
   </template>
   . . .
</dom-module>

Las dos rutas anteriores (my-profile y address-card) pueden conectarse con enlace de datos, si <address-card> está en el DOM local del elemento <my-profile>.

A continuación se muestran los tipos especiales de segmentos de ruta en Polymer.js:

El carácter comodín (*) se puede utilizar como último segmento de una ruta.
Las mutaciones de la matriz se pueden mostrar en una matriz determinada colocando empalmes de cadenas como último segmento de una ruta.
Las rutas de los elementos de la matriz indican un elemento de una matriz y el segmento de ruta numérico especifica un índice de la matriz.

En una ruta de datos, cada segmento de ruta es un nombre de propiedad e incluye seguir dos tipos de rutas:

Los segmentos del camino separados por puntos. Por ejemplo: "apple.grapes.orange".
En una matriz de cadenas, cada elemento de la matriz es un segmento de ruta o una ruta de puntos. Por ejemplo: ["manzana", "uvas", "naranja"], ["manzana.grapes", "naranja"].

Flujo de datos

Ejemplo

El siguiente ejemplo especifica un enlace bidireccional de flujo de datos. Cree un archivo index.html y agregue el siguiente código en él.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "my-element.html">
   </head>
   
   <body>
      <my-element></my-element>
   </body>
</html>

Ahora cree otro archivo llamado my-element.html e incluya el siguiente código.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "my-element">
   <template>
      <prop-element my-prop="{{demoProp}}"></prop-element>
      <p>
         Present value: <span>{{demoProp}}</span>
      </p>
   </template>
   
   <script>
      Polymer ({
         is: "my-element", properties: {
            demoProp: String
         }
      });
   </script>
</dom-module>

A continuación, cree un archivo más llamado prop-element.html y agregue el siguiente código.

//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
   <template>
      <button on-click = "onClickFunc">Change value</button>
   </template>
   
   <script>
      Polymer ({
         is: "prop-element", properties: {
            myProp: {
               type: String,
               notify: true,
               readOnly: true,
               value: 'This is initial value...'
            }
         },
         onClickFunc: function(){
            this._setMyProp('This is new value after clicking the button...');
         }
      });
   </script>
</dom-module>

Salida

Ejecute la aplicación como se muestra en los capítulos anteriores y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

Después de hacer clic en el botón, cambiará el valor como se muestra en la siguiente captura de pantalla.

Vincular dos caminos

Puede vincular las dos rutas al mismo objeto usando el método linkPaths y necesita usar el enlace de datos para generar cambios entre los elementos.

Ejemplo

linkPaths('myTeam', 'players.5');

El enlace de ruta se puede eliminar usando el método unlinkPaths como se muestra a continuación:

unlinkPaths('myTeam');

Observadores

Los cambios observables que se producen en los datos del elemento invocan métodos conocidos como observadores. A continuación se muestran los tipos de observadores.

Se utilizan observadores simples para observar una sola propiedad.
Los observadores complejos se utilizan para observar más de una propiedad o ruta.

El enlace de datos

El enlace de datos se puede utilizar para conectar la propiedad o un atributo de un elemento del elemento host en su DOM local. El enlace de datos se puede crear agregando anotaciones a la plantilla DOM como se muestra en el siguiente código.

<dom-module id = "myhost-element">
   <template>
      <target-element target-property = "{{myhostProperty}}"></target-element>
   </template>
</dom-module>

La anatomía del enlace de datos en la plantilla DOM local se parece a la siguiente:

property-name=annotation-or-compound-binding

attribute-name$=annotation-or-compound-binding

El lado izquierdo del enlace especifica la propiedad o el atributo de destino, mientras que el lado derecho del enlace especifica una anotación de enlace o un enlace compuesto. El texto de la anotación de enlace se incluye entre corchetes dobles ({{}}) o corchetes dobles ([[]]) y el enlace compuesto incluye una o más anotaciones de enlace de cadena literal.

A continuación se muestran los elementos auxiliares, que se utilizan con casos de uso de enlace de datos:

Template Repeater - Se puede crear una instancia del contenido de la plantilla para cada elemento de una matriz.
Array Selector - Proporciona el estado de selección para una matriz de datos estructurados.
Conditional Template - Puede identificar el contenido, si la condición es verdadera.
Auto-binding Template - Especifica el enlace de datos fuera del elemento polímero.

El árbol DOM desencadena un evento de cambio de dom, si los elementos auxiliares actualizan el árbol DOM. A veces, puede interactuar con DOM cambiando los datos del modelo, no interactuando con los nodos creados. Por lo tanto, puede utilizar el evento dom-change para acceder a los nodos directamente.

↰ Previous page