Полимер - Система данных

Полимер позволяет наблюдать за изменениями свойств элемента, выполняя различные действия, такие как:

Observers - Он вызывает обратные вызовы при изменении данных.
Computed Properties - Он вычисляет виртуальные свойства на основе других свойств и повторно вычисляет их при изменении входных данных.
Data Bindings - Он обновляет свойства, атрибуты или текстовое содержимое узла DOM, используя аннотации при изменении данных.

Пути к данным

Path- строка в системе данных, которая предоставляет свойство или подсвойство относительно области. Область видимости может быть ведущим элементом. Пути могут быть связаны с различными элементами с помощью привязки данных. Изменение данных можно перемещать от одного элемента к другому, если элементы связаны с привязкой данных.

пример

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

Два указанных выше пути (my-profile и address-card) могут быть связаны с привязкой данных, если <address-card> находится в локальной DOM элемента <my-profile>.

Ниже приведены специальные типы сегментов пути в Polymer.js:

Подстановочный знак (*) можно использовать в качестве последнего сегмента пути.
Изменения массива можно отобразить в данном массиве, поместив сращивания строк в качестве последнего сегмента пути.
Пути к элементам массива указывают на элемент в массиве, а числовой сегмент пути указывает индекс массива.

В пути к данным каждый сегмент пути представляет собой имя свойства, и они включают следующие два типа путей:

Сегменты пути разделены точками. Например: «яблоко. Виноград. Апельсин».
В массиве строк каждый элемент массива представляет собой либо сегмент пути, либо путь с точками. Например: [«яблоко», «виноград», «апельсин»], [«яблоко. Виноград», «апельсин»].

Поток данных

пример

В следующем примере указывается двусторонняя привязка потока данных. Создайте файл index.html и добавьте в него следующий код.

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

Теперь создайте еще один файл с именем my-element.html и включите следующий код.

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

Затем создайте еще один файл с именем prop-element.html и добавьте следующий код.

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

Вывод

Запустите приложение, как показано в предыдущих главах, и перейдите к http://127.0.0.1:8081/. Ниже будет вывод.

После нажатия кнопки значение изменится, как показано на следующем снимке экрана.

Связывание двух путей

Вы можете связать два пути с одним и тем же объектом, используя метод linkPaths, и вам необходимо использовать привязку данных для генерации изменений между элементами.

пример

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

Связь пути может быть удалена с помощью метода unlinkPaths, как показано ниже -

unlinkPaths('myTeam');

Наблюдатели

Наблюдаемые изменения, происходящие с данными элемента, вызывают методы, известные как наблюдатели. Ниже приведены типы наблюдателей.

Простые наблюдатели используются для наблюдения за одним свойством.
Сложные наблюдатели используются для наблюдения за более чем одним свойством или путем.

Связывание данных

Связывание данных можно использовать для подключения свойства или атрибута элемента из основного элемента в его локальной модели DOM. Связывание данных можно создать, добавив аннотации к шаблону DOM, как показано в следующем коде.

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

Анатомия привязки данных в локальном шаблоне DOM выглядит следующим образом:

property-name=annotation-or-compound-binding

или же

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

Левая часть привязки указывает целевое свойство или атрибут, а правая часть привязки указывает либо аннотацию привязки, либо составную привязку. Текст в аннотации привязки заключен в двойные фигурные скобки ({{}}) или двойные квадратные скобки ([[]]) разделители, а составная привязка включает одну или несколько аннотаций привязки строкового литерала.

Ниже приведены вспомогательные элементы, которые используются с вариантами использования привязки данных.

Template Repeater - Экземпляр содержимого шаблона может быть создан для каждого элемента в массиве.
Array Selector - Предоставляет состояние выбора для массива структурированных данных.
Conditional Template - Вы можете идентифицировать контент, если условие выполняется.
Auto-binding Template - Указывает привязку данных вне полимерного элемента.

Дерево DOM запускает событие dom-change, если вспомогательные элементы обновляют дерево DOM. Иногда вы можете взаимодействовать с DOM, изменяя данные модели, а не взаимодействуя с созданными узлами. Следовательно, вы можете использовать событие dom-change для прямого доступа к узлам.