Учебники

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

Июль 20, 2018

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

  • Наблюдатели — это вызывает обратные вызовы всякий раз, когда данные изменяются.

  • Вычисляемые свойства — вычисляет виртуальные свойства на основе других свойств и пересчитывает их при каждом изменении входных данных.

  • Привязки данных — обновляет свойства, атрибуты или текстовое содержимое узла DOM, используя аннотации при каждом изменении данных.

Наблюдатели — это вызывает обратные вызовы всякий раз, когда данные изменяются.

Вычисляемые свойства — вычисляет виртуальные свойства на основе других свойств и пересчитывает их при каждом изменении входных данных.

Привязки данных — обновляет свойства, атрибуты или текстовое содержимое узла DOM, используя аннотации при каждом изменении данных.

Пути к данным

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

пример 

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

  • Подстановочный знак (*) можно использовать в качестве последнего сегмента пути.

  • Мутации массива могут быть отображены в заданном массиве путем размещения сращиваний строк в качестве последнего сегмента пути.

  • Пути к элементам массива указывают элемент в массиве, а числовой сегмент пути указывает индекс массива.

Подстановочный знак (*) можно использовать в качестве последнего сегмента пути.

Мутации массива могут быть отображены в заданном массиве путем размещения сращиваний строк в качестве последнего сегмента пути.

Пути к элементам массива указывают элемент в массиве, а числовой сегмент пути указывает индекс массива.

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

  • Сегменты пути разделены точками. Например: «apple.grapes.orange».

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

Сегменты пути разделены точками. Например: «apple.grapes.orange».

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

Поток данных

пример

В следующем примере указывается двусторонняя привязка потока данных. Создайте файл 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

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

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

  • Повторитель шаблона — экземпляр содержимого шаблона может быть создан для каждого элемента в массиве.

  • Селектор массива — предоставляет состояние выбора для массива структурированных данных.

  • Условный шаблон — вы можете определить содержание, если условие выполняется.

  • Шаблон автоматической привязки — определяет привязку данных вне полимерного элемента.

Повторитель шаблона — экземпляр содержимого шаблона может быть создан для каждого элемента в массиве.

Селектор массива — предоставляет состояние выбора для массива структурированных данных.

Условный шаблон — вы можете определить содержание, если условие выполняется.

Шаблон автоматической привязки — определяет привязку данных вне полимерного элемента.

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

41
Share: