Polymère - Système de données

Polymer permet d'observer les changements sur les propriétés d'un élément en effectuant différentes actions telles que -

  • Observers - Il appelle les rappels chaque fois que les données changent.

  • Computed Properties - Il calcule les propriétés virtuelles en fonction d'autres propriétés et les recalcule chaque fois que les données d'entrée changent.

  • Data Bindings - Il met à jour les propriétés, les attributs ou le contenu textuel d'un nœud DOM à l'aide d'annotations chaque fois que les données changent.

Chemins de données

Pathest une chaîne dans le système de données, qui fournit une propriété ou une sous-propriété relative à une étendue. La portée peut être un élément hôte. Les chemins peuvent être liés à différents éléments à l'aide de la liaison de données. La modification des données peut être déplacée d'un élément à un autre, si les éléments sont connectés avec la liaison de données.

Exemple

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

Les deux chemins ci-dessus (my-profile et address-card) peuvent être connectés avec la liaison de données, si <address-card> est dans le DOM local de l'élément <my-profile>.

Voici les types spéciaux de segments de chemin dans Polymer.js -

  • Le caractère générique (*) peut être utilisé comme dernier segment d'un chemin.

  • Les mutations du tableau peuvent être affichées dans un tableau donné en plaçant des épissures de chaîne comme dernier segment d'un chemin.

  • Les chemins des éléments de tableau indiquent un élément dans un tableau et le segment de chemin numérique spécifie un index de tableau.

Dans un chemin de données, chaque segment de chemin est un nom de propriété et ils incluent les deux types de chemins suivants:

  • Les segments de chemin séparés par des points. Par exemple: "apple.grapes.orange".

  • Dans un tableau de chaînes, chaque élément du tableau est soit un segment de chemin, soit un chemin en pointillé. Par exemple: ["pomme", "raisin", "orange"], ["pomme raisin", "orange"].

Flux de données

Exemple

L'exemple suivant spécifie une liaison bidirectionnelle du flux de données. Créez un fichier index.html et ajoutez-y le code suivant.

<!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>

Créez maintenant un autre fichier appelé my-element.html et incluez le code suivant.

<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>

Ensuite, créez un autre fichier appelé prop-element.html et ajoutez le code suivant.

//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>

Production

Exécutez l'application comme indiqué dans les chapitres précédents et accédez à http://127.0.0.1:8081/. Voici la sortie.

Après avoir cliqué sur le bouton, la valeur sera modifiée comme indiqué dans la capture d'écran suivante.

Lier deux chemins

Vous pouvez lier les deux chemins au même objet à l'aide de la méthode linkPaths et devez utiliser la liaison de données pour générer des modifications entre les éléments.

Exemple

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

La liaison de chemin peut être supprimée en utilisant la méthode unlinkPaths comme indiqué ci-dessous -

unlinkPaths('myTeam');

Observateurs

Les modifications observables qui se produisent dans les données de l'élément invoquent des méthodes appelées observateurs. Voici les types d'observateurs.

  • Des observateurs simples sont utilisés pour observer une seule propriété.

  • Les observateurs complexes sont utilisés pour observer plusieurs propriétés ou chemins.

Liaison de données

La liaison de données peut être utilisée pour connecter la propriété ou un attribut d'un élément de l'élément hôte dans son DOM local. La liaison de données peut être créée en ajoutant des annotations au modèle DOM comme indiqué dans le code suivant.

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

L'anatomie de la liaison de données dans le modèle DOM local ressemble à ceci:

property-name=annotation-or-compound-binding

ou

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

Le côté gauche de la liaison spécifie la propriété ou l'attribut cible, tandis que le côté droit de la liaison spécifie soit une annotation de liaison, soit une liaison composée. Le texte dans l'annotation de liaison est entouré par des délimiteurs doubles crochets ({{}}) ou doubles crochets ([[]]) et la liaison composée comprend une ou plusieurs annotations de liaison littérale de chaîne.

Voici les éléments d'aide, qui sont utilisés avec des cas d'utilisation de liaison de données -

  • Template Repeater - Une instance du contenu du modèle peut être créée pour chaque élément d'un tableau.

  • Array Selector - Il fournit l'état de sélection pour un tableau de données structurées.

  • Conditional Template - Vous pouvez identifier le contenu, si la condition est vraie.

  • Auto-binding Template - Il spécifie la liaison des données en dehors de l'élément polymère.

L'arborescence DOM déclenche un événement dom-change, si les éléments d'assistance mettent à jour l'arborescence DOM. Parfois, vous pouvez interagir avec DOM en modifiant les données du modèle, pas en interagissant avec les nœuds créés. Par conséquent, vous pouvez utiliser l'événement dom-change pour accéder directement aux nœuds.