Polimer - system danych

Polimer umożliwia obserwowanie zmian właściwości elementu poprzez podejmowanie różnych działań, takich jak -

Observers - Wywołuje wywołania zwrotne za każdym razem, gdy zmieniają się dane.
Computed Properties - Oblicza właściwości wirtualne na podstawie innych właściwości i ponownie je oblicza za każdym razem, gdy zmieniają się dane wejściowe.
Data Bindings - Aktualizuje właściwości, atrybuty lub zawartość tekstową węzła DOM za pomocą adnotacji za każdym razem, gdy zmieniają się dane.

Ścieżki danych

Pathto ciąg znaków w systemie danych, który zapewnia właściwość lub właściwość podrzędną w odniesieniu do zakresu. Zakres może być elementem hosta. Ścieżki można łączyć z różnymi elementami za pomocą powiązania danych. Zmiana danych może być przenoszona z jednego elementu do drugiego, jeśli elementy są połączone wiązaniem danych.

Przykład

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

Powyższe dwie ścieżki (mój-profil i karta adresowa) mogą być połączone z wiązaniem danych, jeśli <address-card> znajduje się w lokalnym DOM elementu <my-profile>.

Poniżej przedstawiono specjalne typy segmentów ścieżek w Polymer.js -

Znak wieloznaczny (*) może być użyty jako ostatni segment ścieżki.
Mutacje tablicy można wyświetlić w danej tablicy, umieszczając spojenia ciągów jako ostatni segment ścieżki.
Ścieżki do elementów tablicy wskazują element w tablicy, a segment numeryczny ścieżki określa indeks tablicy.

W ścieżce danych każdy segment ścieżki jest nazwą właściwości i obejmuje dwa rodzaje ścieżek -

Segmenty ścieżki oddzielone kropkami. Na przykład: „apple.grapes.orange”.
W tablicy ciągów każdy element tablicy jest segmentem ścieżki lub ścieżką kropkowaną. Na przykład: [„jabłko”, „winogrona”, „pomarańcza”], [„jabłko.grapes”, „pomarańcza”].

Przepływ danych

Przykład

Poniższy przykład określa dwukierunkowe powiązanie przepływu danych. Utwórz plik index.html i dodaj w nim następujący kod.

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

Teraz utwórz kolejny plik o nazwie my-element.html i dołącz następujący kod.

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

Następnie utwórz jeszcze jeden plik o nazwie prop-element.html i dodaj następujący kod.

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

Wynik

Uruchom aplikację, jak pokazano w poprzednich rozdziałach, i przejdź do http://127.0.0.1:8081/. Poniżej będzie wynik.

Po kliknięciu przycisku zmieni wartość, jak pokazano na poniższym zrzucie ekranu.

Łączenie dwóch ścieżek

Możesz połączyć dwie ścieżki z tym samym obiektem przy użyciu metody linkPaths i musisz użyć powiązania danych, aby wygenerować zmiany między elementami.

Przykład

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

Powiązanie ścieżki można usunąć za pomocą metody unlinkPaths, jak pokazano poniżej -

unlinkPaths('myTeam');

Obserwatorzy

Obserwowalne zmiany, które występują w danych elementu, wywołują metody zwane obserwatorami. Poniżej przedstawiono typy obserwatorów.

Do obserwacji pojedynczej właściwości używa się prostych obserwatorów.
Złożone obserwatory służą do obserwowania więcej niż jednej właściwości lub ścieżki.

Wiązanie danych

Powiązanie danych może służyć do łączenia właściwości lub atrybutu elementu z elementu hosta w jego lokalnym modelu DOM. Powiązanie danych można utworzyć, dodając adnotacje do szablonu DOM, jak pokazano w poniższym kodzie.

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

Anatomia wiązania danych w lokalnym szablonie DOM wygląda następująco -

property-name=annotation-or-compound-binding

lub

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

Lewa strona powiązania określa docelową właściwość lub atrybut, a prawa strona powiązania określa adnotację powiązania lub powiązanie złożone. Tekst w adnotacji wiążącej jest ujęty w podwójny nawias klamrowy ({{}}) lub podwójny nawias kwadratowy ([[]]), a wiązanie złożone zawiera co najmniej jedną adnotację powiązania literału ciągu.

Poniżej przedstawiono elementy pomocnicze, które są używane w przypadkach użycia powiązań danych -

Template Repeater - Wystąpienie zawartości szablonu można utworzyć dla każdego elementu w tablicy.
Array Selector - Zapewnia stan wyboru dla tablicy ustrukturyzowanych danych.
Conditional Template - Możesz zidentyfikować treść, jeśli warunek jest prawdziwy.
Auto-binding Template - Określa powiązanie danych poza elementem polimerowym.

Drzewo DOM wyzwala zdarzenie dom-change, jeśli elementy pomocnicze zaktualizują drzewo DOM. Czasami możesz wchodzić w interakcję z DOM, zmieniając dane modelu, a nie przez interakcję z utworzonymi węzłami. Dlatego możesz użyć zdarzenia dom-change, aby uzyskać bezpośredni dostęp do węzłów.