Polymer - Datensystem

Mit Polymer können Sie die Änderungen der Eigenschaften eines Elements beobachten, indem Sie verschiedene Aktionen ausführen, z.

Observers - Es ruft die Rückrufe auf, wenn sich die Daten ändern.
Computed Properties - Es berechnet die virtuellen Eigenschaften basierend auf anderen Eigenschaften und berechnet sie neu, wenn sich die Eingabedaten ändern.
Data Bindings - Es aktualisiert die Eigenschaften, Attribute oder den Textinhalt eines DOM-Knotens mithilfe von Anmerkungen, wenn sich die Daten ändern.

Datenpfade

Pathist eine Zeichenfolge im Datensystem, die eine Eigenschaft oder eine Untereigenschaft relativ zu einem Bereich bereitstellt. Der Bereich kann ein Hostelement sein. Pfade können mithilfe der Datenbindung mit verschiedenen Elementen verknüpft werden. Datenänderungen können von einem Element zu einem anderen verschoben werden, wenn die Elemente mit der Datenbindung verbunden sind.

Beispiel

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

Die beiden oben genannten Pfade (mein Profil und meine Adresskarte) können mit der Datenbindung verbunden werden, wenn sich <Adresskarte> im lokalen DOM des Elements <my-profile> befindet.

Im Folgenden sind die speziellen Arten von Pfadsegmenten in Polymer.js aufgeführt:

Das Platzhalterzeichen (*) kann als letztes Segment in einem Pfad verwendet werden.
Die Array-Mutationen können für ein bestimmtes Array angezeigt werden, indem String-Splices als letztes Segment in einem Pfad platziert werden.
Array-Elementpfade geben ein Element in einem Array an, und das numerische Pfadsegment gibt einen Array-Index an.

In einem Datenpfad ist jedes Pfadsegment ein Eigenschaftsname und umfasst zwei Arten von Pfaden:

Die Pfadsegmente sind durch Punkte getrennt. Zum Beispiel: "apple.grapes.orange".
In einem Array von Zeichenfolgen ist jedes Array-Element entweder ein Pfadsegment oder ein gepunkteter Pfad. Zum Beispiel: ["Apfel", "Trauben", "Orange"], ["Apfel.Trauben", "Orange"].

Datenfluss

Beispiel

Das folgende Beispiel gibt eine bidirektionale Bindung des Datenflusses an. Erstellen Sie eine index.html-Datei und fügen Sie den folgenden Code hinzu.

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

Erstellen Sie nun eine weitere Datei mit dem Namen my-element.html und fügen Sie den folgenden Code hinzu.

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

Erstellen Sie als Nächstes eine weitere Datei mit dem Namen prop-element.html und fügen Sie den folgenden Code hinzu.

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

Ausgabe

Führen Sie die Anwendung wie in den vorherigen Kapiteln gezeigt aus und navigieren Sie zu http://127.0.0.1:8081/. Es folgt die Ausgabe.

Nach dem Klicken auf die Schaltfläche wird der Wert wie im folgenden Screenshot gezeigt geändert.

Zwei Pfade verbinden

Sie können die beiden Pfade mithilfe der linkPaths-Methode mit demselben Objekt verknüpfen und müssen die Datenbindung verwenden, um Änderungen zwischen den Elementen zu generieren.

Beispiel

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

Die Pfadverknüpfung kann mit der Methode unlinkPaths wie unten gezeigt entfernt werden.

unlinkPaths('myTeam');

Beobachter

Die beobachtbaren Änderungen, die an den Daten des Elements auftreten, rufen Methoden auf, die als Beobachter bezeichnet werden. Es folgen die Arten von Beobachtern.

Einfache Beobachter werden verwendet, um eine einzelne Eigenschaft zu beobachten.
Komplexe Beobachter werden verwendet, um mehr als eine Eigenschaft oder einen Pfad zu beobachten.

Datenbindung

Die Datenbindung kann verwendet werden, um die Eigenschaft oder ein Attribut eines Elements mit dem Hostelement in seinem lokalen DOM zu verbinden. Die Datenbindung kann durch Hinzufügen von Anmerkungen zur DOM-Vorlage erstellt werden, wie im folgenden Code gezeigt.

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

Die Anatomie der Datenbindung in der lokalen DOM-Vorlage sieht wie folgt aus:

property-name=annotation-or-compound-binding

oder

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

Die linke Seite der Bindung gibt die Zieleigenschaft oder das Zielattribut an, während die rechte Seite der Bindung entweder eine Bindungsanmerkung oder eine zusammengesetzte Bindung angibt. Der Text in der Bindungsanmerkung wird durch Trennzeichen mit doppelter geschweifter Klammer ({{}}) oder doppelter eckiger Klammer ([[]]) eingeschlossen, und die zusammengesetzte Bindung enthält eine oder mehrere wörtliche Bindungsanmerkungen für Zeichenfolgen.

Im Folgenden sind die Hilfselemente aufgeführt, die in datenbindenden Anwendungsfällen verwendet werden:

Template Repeater - Für jedes Element in einem Array kann eine Instanz des Inhalts der Vorlage erstellt werden.
Array Selector - Es liefert den Auswahlstatus für ein Array strukturierter Daten.
Conditional Template - Sie können den Inhalt identifizieren, wenn die Bedingung erfüllt ist.
Auto-binding Template - Es gibt die Datenbindung außerhalb des Polymerelements an.

Der DOM-Baum löst ein Dom-Change-Ereignis aus, wenn die Hilfselemente den DOM-Baum aktualisieren. Manchmal können Sie mit DOM interagieren, indem Sie die Modelldaten ändern, nicht indem Sie mit den erstellten Knoten interagieren. Daher können Sie das dom-change-Ereignis verwenden, um direkt auf die Knoten zuzugreifen.