Polimer - krótki przewodnik

Polymer.js to biblioteka JavaScript stworzona przez Google, która umożliwia ponowne wykorzystanie elementów HTML do tworzenia aplikacji z komponentami.

Polymer to biblioteka JavaScript typu open source opracowana przez programistów Google i została wydana po raz pierwszy 27 maja 2015 r. Wersja stabilna to 1.7.0 i została wydana 29 września 2016 r.

Dlaczego warto korzystać z Polymer.js?

Umożliwia łatwe tworzenie własnych elementów niestandardowych za pomocą HTML, CSS i JavaScript w celu dodania interakcji do elementu.
Jest tworzony przez Google, który dostarcza aplikacje kompatybilne z różnymi przeglądarkami wraz z komponentami sieciowymi.
Zapewnia jednokierunkowe i dwukierunkowe wiązanie danych.
Zapewnia interfejs wiersza poleceń Polymer do zarządzania projektami od prostych komponentów po skomplikowane aplikacje internetowe.

Funkcje Polymer.js

Jest to biblioteka JavaScript zbudowana na bazie interfejsów API standardów internetowych, która umożliwia tworzenie niestandardowych elementów HTML.
Zapewnia wypełniacze (specyfikacje komponentów internetowych) do tworzenia własnych elementów niestandardowych i wielokrotnego użytku.
Wykorzystuje standardy komponentów sieciowych do tworzenia widgetów wielokrotnego użytku w dokumentach internetowych i aplikacjach internetowych.
Wykorzystuje Material Design Google do tworzenia hybrydowych aplikacji mobilnych.
Rozprowadza niestandardowe elementy w sieci, a użytkownicy mogą używać tych elementów za pomocą importu HTML.

Konfiguracja Polymer w systemie jest łatwa. Poniżej przedstawiono dwa sposoby instalacji polimeru.

Polimerowy interfejs CLI (interfejs wiersza poleceń)
Altana

Instalowanie polimeru za pomocą polimerowego interfejsu wiersza polecenia

Step 1 - Zainstaluj Polymer za pomocą następującego polecenia npm.

npm install -g polymer-cli@next

Step 2 - Sprawdź pomyślną instalację i wersję za pomocą następującego polecenia.

polymer --version

Jeśli została pomyślnie zainstalowana, wyświetli wersję jako -

Step 3 - Utwórz katalog o wybranej nazwie i przejdź do tego katalogu.

mkdir polymer-js 
cd polymer-js

Step 4- Aby zainicjować projekt, uruchom następujące polecenie w katalogu polimer-js .

polymer init

Po wykonaniu powyższego polecenia pokaże coś takiego -

C:\polymer-js>polymer init 
? Which starter template would you like to use? 
   1) polymer-1-element - A simple Polymer 1.0 element template 
   2) polymer-2-element - A simple Polymer 2.0 element template 
   3) polymer-1-application - A simple Polymer 1.0 application template 
   4) polymer-2-application - A simple Polymer 2.0 application 
   5) polymer-1-starter-kit - A Polymer 1.x starter application template, with 
      navigation and "PRPL pattern" loading 
   6) polymer-2-starter-kit - A Polymer 2.x starter application template, with 
      navigation and "PRPL pattern" loading 
   7) shop - The "Shop" Progressive Web App demo
   Answer: 4

Step 5 - Wybierz aplikację polimer-2 z podanych powyżej opcji.

Teraz rozpocznij projekt za pomocą następującego polecenia.

polymer serve

Instalowanie polimeru za pomocą Bower

Step 1 - Aby rozpocząć od podstaw metodą Bower, zainstaluj Bower za pomocą następującego polecenia.

npm install -g bower

Step 2 - Zainstaluj polimer za pomocą następującego polecenia.

npm install -g polymer-cli@next

Step 3 - Sprawdź pomyślną instalację i wersję Polymer za pomocą następującego polecenia.

polymer --version

Jeśli została pomyślnie zainstalowana, wyświetli wersję jako -

0.18.0-pre.13.

Step 4 - Aby zainstalować najnowszą wersję Polymer 2.0 RC z bower, użyj następującego polecenia.

bower install Polymer/polymer#^2.0.0-rc.3

Step 5 - Utwórz plik index.html file i dodaj następujący kod w tagu <head>.

<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script> 
// it loads the polyfills 

<link rel = "import" href = "/bower_components/polymer/polymer.html"> 
// it import Polymer

Step 6 - Rozpocznij projekt za pomocą następującego polecenia.

polymer serve

Budowanie do wdrożenia

Aby zbudować projekt do wdrożenia, polymer build polecenie jest łatwiejszym sposobem, który zminimalizuje, skompiluje lub spakuje kod w zależności od flag wiersza polecenia.

Aby utworzyć uniwersalną kompilację, która działa we wszystkich przeglądarkach, użyj następującego polecenia.

polymer build --js-compile

Powyższe polecenie zbuduje projekt do zbudowania / domyślnego i możesz uruchomić ten katalog, używając następującego polecenia.

polymer serve build/default

Polymer 2.0 wykorzystuje niestandardowe elementy ES6 i HTML. Aby uzyskać najlepsze praktyki, zawsze dobrze jest używać ES6 w przeglądarkach z pełną obsługą ES6 i skompilować ES5 do starszych przeglądarek, które nie obsługują ES6. Poniższa tabela przedstawia najlepszą strategię dla Twojego projektu.

Strategia	Najłatwiejszy do obsługi wielu przeglądarek	Najbardziej optymalny dla wydajności WC v1
serwer	Działa dowolny serwer, w tym statyczny	Wymagana obsługa różnicowa
Wdrożony kod	Przekazano ES5	ES6
Ładowarka Polyfill	webcomponents-es5-loader.js	webcomponents-loader.js

Elementy polimerowe to zestaw elementów wizualnych i niewizualnych zaprojektowanych do pracy z układem, interakcją użytkownika, wyborem i aplikacjami do tworzenia rusztowań. Obejmują one wszystko, od prostego przycisku po okno dialogowe z ładnymi efektami wizualnymi. Poniższa tabela przedstawia różne typy elementów polimerowych.

Sr.No.	Rodzaje i opis
1	elementy aplikacji Elementy aplikacji są przydatne podczas tworzenia całych aplikacji.
2	żelazne elementy To są podstawowe elementy składowe do tworzenia aplikacji.
3	elementy papierowe Elementy papierowe to zestaw komponentów interfejsu użytkownika zaprojektowanych w celu wdrożenia wytycznych Google Material Design.
4	komponenty internetowe google Komponent sieciowy Google to zbiór komponentów sieciowych dla interfejsów API i usług Google.
5	złote elementy Złote elementy są zbudowane pod kątem przypadków użycia specyficznych dla handlu elektronicznego.
6	elementy neonowe Służy do implementowania animowanych przejść dla elementów Polymer przy użyciu animacji internetowych.
7	elementy platynowe Elementy platynowe zapewniają funkcje umożliwiające przekształcenie strony internetowej w prawdziwą aplikację internetową.
8	elementy cząsteczek Element molekuły pomaga w łatwym opracowaniu aplikacji i służy do łączenia grupy wtyczek z aplikacją Polymer.

Polymer to framework, który umożliwia tworzenie niestandardowych elementów przy użyciu standardowych elementów HTML. Niestandardowe elementy internetowe zapewniają następujące funkcje -

Zapewnia niestandardową nazwę elementu z klasą skojarzoną.
Gdy zmienisz stan wystąpienia elementu niestandardowego, zażąda on wywołania zwrotnego cyklu życia.
Jeśli zmienisz atrybuty w instancji, zostanie zażądane wywołanie zwrotne.

Możesz zdefiniować element niestandardowy za pomocą klasy ES6, a klasa może być skojarzona z elementem niestandardowym, jak pokazano w poniższym kodzie.

//ElementDemo class is extending the HTMLElement 
class ElementDemo extends HTMLElement { 
   // code here
};

//link the new class with an element name
window.customElements.define('element-demo', ElementDemo);

Element niestandardowy może być używany jako element standardowy, jak pokazano poniżej -

<element-demo></element-demo>

Note - Nazwa elementu niestandardowego powinna zaczynać się od małej litery i zawierać myślnik między nazwami.

Cykl życia elementu niestandardowego

Niestandardowy cykl życia elementu zapewnia zestaw niestandardowych reakcji elementów, które są odpowiedzialne za zmianę cyklu życia elementu i są zdefiniowane w poniższej tabeli.

Sr.No.	Reakcje i opis
1	constructor Podczas tworzenia elementu lub definiowania utworzonego wcześniej elementu ta reakcja elementu zostanie wywołana.
2	connectedCallback Po dodaniu elementu do dokumentu ta reakcja na element zostanie wywołana.
3	disconnectedCallback Kiedy usuniesz element z dokumentu, ta reakcja na element zostanie wywołana.
4	attributeChangedCallback Za każdym razem, gdy zmieniasz, dodajesz, usuwasz lub zastępujesz element w dokumencie, wywoływana jest ta reakcja elementu.

Ulepszenia elementów

Możemy użyć elementów niestandardowych przed zdefiniowaniem ich przez specyfikację, a wszelkie istniejące instancje elementu zostaną zaktualizowane do klasy niestandardowej przez dodanie definicji do tego elementu.

Stan elementu niestandardowego zawiera następujące wartości -

uncustomized - Prawidłowa nazwa elementu niestandardowego to element wbudowany lub nieznany element, który nie może stać się elementem niestandardowym.
undefined - Element może mieć prawidłową nazwę elementu niestandardowego, ale nie można go zdefiniować.
custom - Element może mieć prawidłową nazwę elementu niestandardowego, którą można zdefiniować i zaktualizować.
failed - Próba uaktualnienia uszkodzonego elementu nieprawidłowej klasy.

Definiowanie elementu

Element niestandardowy można zdefiniować, tworząc klasę rozszerzającą Polymer.Element i przekazującą tę klasę do metody customElements.define. Klasa zawiera metodę pobierającą, która zwraca nazwę znacznika HTML elementu niestandardowego. Na przykład -

//ElementDemo class is extending the Polymer.Element 
class ElementDemo extends Polymer.Element {
   static get is() { return 'element-demo'; }
   static get properties() {
      . . .
      . . .
   }
   constructor(){
      super();
      . . .
      . . .
   }
   . . .
   . . .
}

//Associate the new class with an element name
window.customElements.define(ElementDemo.is, ElementDemo);

// create an instance with createElement
var el1 = document.createElement('element-demo');

Importy i interfejsy API

Elementy Polymer można zdefiniować, określając następujące trzy importy HTML -

polymer-element.html - Określa klasę bazową Polymer.Element.
legacy-element.html- Rozszerza Polymer.Element przy użyciu klasy bazowej Polymer.LegacyElement i dodaje starsze API zgodne z 1.x. Tworzy również elementy hybrydowe, definiując starszą metodę fabryki Polymer ().
polymer.html - Zawiera klasy bazowe Polymer wraz z elementami pomocniczymi, które zostały zawarte w 1.x polimer.html.

Zdefiniuj element w głównym dokumencie HTML

Możesz zdefiniować element w głównym dokumencie HTML za pomocą funkcji HTMLImports.whenReady ().

Przykład

Poniższy przykład pokazuje, jak zdefiniować element w głównym dokumencie HTML. Utwórz plik index.html i dodaj następujący kod.

<!doctype html>
<html lang = "en">
   <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 = "define-element.html">
   </head>
   
   <body>
      <define-element></define-element>
   </body>
</html>

Teraz utwórz niestandardowy element o nazwie define-element.html i dołącz poniższy kod.

<dom-module id = "define-element">
   <template>
      <h2>Welcome to Tutorialspoint!!!</h2>
   </template>
   
   <script>
      HTMLImports.whenReady(function(){
         Polymer ({
            is: "define-element"
         })
      })  
   </script>
</dom-module>

Wynik

Aby uruchomić aplikację, przejdź do utworzonego katalogu projektu i uruchom następujące polecenie.

polymer serve

Teraz otwórz przeglądarkę i przejdź do http://127.0.0.1:8081/. Poniżej będzie wynik.

Zdefiniuj starszy element

Wcześniejszy element może zostać użyty do zarejestrowania elementu za pomocą funkcji Polymer, która pobiera prototyp na nowy element. Prototyp powinien zawieraćis który definiuje nazwę tagu HTML dla elementu niestandardowego.

Przykład

//registering an element
ElementDemo = Polymer ({
   is: 'element-demo',
   
   //it is a legecy callback, called when the element has been created
   created: function() {
     this.textContent = 'Hello World!!!';
   }
});

//'createElement' is used to create an instance
var myelement1 = document.createElement('element-demo');

//use the constructor create an instance
var myelement2 = new ElementDemo();

Wywołania zwrotne w cyklu życia

Wywołania zwrotne cyklu życia są używane do wykonywania zadań dla wbudowanych funkcji programu Polymer.Elementklasa. Polymer używa gotowego wywołania zwrotnego, które zostanie wywołane, gdy Polymer zakończy tworzenie i inicjalizację elementów DOM.

Poniżej znajduje się lista starszych wywołań zwrotnych w Polymer.js.

created - Jest wywoływana, gdy tworzysz element przed ustawieniem wartości właściwości i zainicjowaniem lokalnego DOM.
ready - Jest wywoływana podczas tworzenia elementu po ustawieniu wartości właściwości i zainicjowaniu lokalnego DOM.
attached - Jest wywoływana po dołączeniu elementu do dokumentu i może być wywoływana więcej niż jeden raz przez cały okres istnienia elementu.
detached - Jest wywoływana po odłączeniu elementu od dokumentu i może być wywoływana więcej niż jeden raz przez cały okres istnienia elementu.
attributeChanged - Jest wywoływany, gdy występują zmiany w atrybutach elementu i przechowuje zmiany atrybutów, które nie są zgodne z zadeklarowanymi właściwościami.

Deklarowanie właściwości

Właściwości można zadeklarować w elemencie w celu dodania wartości domyślnej i innych specyficznych funkcji w systemie danych i można ich użyć do określenia następujących funkcji -

Określa typ właściwości i wartość domyślną.
Wywołuje metodę obserwatora, gdy nastąpią zmiany wartości właściwości.
Określa stan tylko do odczytu, aby zatrzymać nieoczekiwane zmiany wartości właściwości.
Zapewnia obsługę dwukierunkowego wiązania danych, które wyzwala zdarzenie po zmianie wartości właściwości.
Jest to właściwość obliczana, która oblicza wartość dynamicznie w zależności od innych właściwości.
Aktualizuje i odzwierciedla odpowiednią wartość atrybutu, gdy zmieniasz wartości właściwości.

W poniższej tabeli przedstawiono klucze dla każdej właściwości, które są obsługiwane przez obiekt właściwości.

Sr.No.	Klucz i opis	Rodzaj
1	type Deserializacji z atrybutu, którego typ właściwości jest określany przy użyciu konstruktora typu.	konstruktor (Boolean, Date, Number, String, Array or Object)
2	value Określa domyślną wartość właściwości, a jeśli jest to funkcja, używa wartości zwracanej jako wartości domyślnej właściwości.	wartość logiczna, liczba, ciąg lub funkcja.
3	reflectToAttribute Jeśli ten klucz ma wartość true, ustawia odpowiedni atrybut w węźle hosta. Atrybut można utworzyć jako standardowy atrybut boolowski HTML, jeśli ustawisz wartość właściwości jako Boolean.	boolean
4	readOnly Nie można ustawić właściwości bezpośrednio przez przypisanie lub powiązanie danych, jeśli ten klucz ma wartość true.	boolean
5	notify Możesz użyć właściwości do dwukierunkowego powiązania danych, jeśli ten klucz jest ustawiony na true, a po zmianie właściwości zostanie wyzwolone zdarzenie nazwa-właściwości-zmiana.	boolean
6	computed Możesz obliczyć wartość argumentu za każdym razem, gdy się zmieni, wywołując metodę, a wartość zostanie uproszczona jako nazwa metody i lista argumentów.	strunowy
7	observer Wywołaj nazwę metody, która jest uproszczona przez wartość, gdy zmienia się wartość właściwości.	strunowy

Deserializacja atrybutów

Zdeserializuj nazwę właściwości, która pasuje do atrybutu w instancji zgodnie z określonym typem i tą samą nazwą właściwości w instancji elementu, jeśli właściwość jest skonfigurowana w obiekcie właściwości.

Możesz ustawić określony typ bezpośrednio jako wartość właściwości, jeśli nie ma innych opcji właściwości zdefiniowanych w obiekcie properties; w przeciwnym razie dostarczy wartość do klucza typu w obiekcie konfiguracyjnym właściwości.

Konfigurowanie właściwości logicznych

Właściwość Boolean można skonfigurować na podstawie znaczników, ustawiając ją na false, a jeśli jest ustawiona na true, nie można skonfigurować na podstawie znaczników, ponieważ atrybut z wartością lub bez jest zrównany z wartością true. Dlatego jest znane jako standardowe zachowanie atrybutów na platformie internetowej.

Właściwości obiektu i tablicy można skonfigurować, przekazując je w formacie JSON jako -

<element-demo player = '{ "name": "Sachin", "country": "India" }'></element-demo>

Konfigurowanie domyślnych wartości właściwości

Właściwość domyślną można skonfigurować za pomocą pola wartości w obiekcie właściwości i może to być wartość pierwotna lub funkcja zwracająca wartość.

Przykład

Poniższy przykład przedstawia sposób konfigurowania domyślnych wartości właściwości w obiekcie properties.

<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id="polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>	
   </template>

   <script>
      //cusom element extending the Polymer.Element class
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String,
                  //displaying this value on screen
                  value: 'Welcome to Tutorialspoint;!!!'
               },
               data: {
                  type: Object,
                  notify: true,
                  value: function() { return {}; }
               }
            }
         }
      }
      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

Wynik

Uruchom aplikację, jak pokazano w poprzednim przykładzie, i przejdź do http://127.0.0.1:8000/. Poniżej będzie wynik.

Właściwości tylko do odczytu

Możesz uniknąć nieoczekiwanych zmian w produkowanych danych, ustawiając flagę readOnly na true w obiekcie properties. Element używa metody ustawiającej konwencję _setProperty (wartość), aby zmienić wartość właściwości.

Przykład

Poniższy przykład przedstawia użycie właściwości tylko do odczytu w obiekcie properties. 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 poprzednim przykładzie, 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.

Odzwierciedlanie właściwości w atrybutach

Atrybut HTML można zsynchronizować z wartością właściwości, ustawiając właściwość reflectToAttribute do true we właściwości w obiekcie konfiguracyjnym właściwości.

Serializacja atrybutów

Wartość właściwości można serializować do atrybutu, odzwierciedlając lub wiążąc właściwość z atrybutem, a wartości domyślne mogą być serializowane w zależności od bieżącego typu wartości.

String - Nie ma potrzeby serializacji.
Date or Number - Użyj toString, aby serializować wartości.
Boolean - Ustaw wyświetlany atrybut bez wartości jako prawda lub fałsz.
Array or Object - Użyj JSON.stringify, aby serializować wartość.

Shadow DOM to nowa właściwość DOM używana do tworzenia komponentów.

Example

W poniższym kodzie komponent nagłówka zawiera tytuł strony i przycisk menu.

<header-demo>
   <header>
      <h1>
         <button>

Shadow DOM umożliwia lokalizowanie dzieci w poddrzewie o określonym zakresie, które jest znane jako shadow tree.

<header-demo>
   #shadow-root
   <header>
      <h1>
      <button>

Główny cień cienia jest nazywany wierzchołkiem drzewa cienia, a element, który jest do niego dołączony, nazywany jest hostem cienia (nagłówek-demo). Ten host-cień zawiera właściwość o nazwie shadowRoot, która określa główny element cienia. Cień główny identyfikuje element hosta za pomocą właściwości hosta.

Shadow DOM i kompozycja

Drzewo cienia może być renderowane zamiast elementów potomnych elementu, jeśli istnieje element w cieniu DOM. Elementy podrzędne elementu można renderować, dodając element <slot> do drzewa cienia.

Na przykład użyj następującego drzewa cieni dla <header-demo>.

<header>
   <h1><slot></slot></h1>
   &ltbutton>Menu</button>
</header>

Dodaj dzieci do elementu <my-header> jako -

<header-demo>Shadow DOM</header-demo>

Nagłówek zastępuje element </slot> powyższymi określonymi dziećmi jako -

<header-demo>
   <header>
      <h1>Shadow DOM</h1>
      <button>Menu</button>
   </header>
</header-demo>

Treść zastępcza

Zawartość rezerwową można wyświetlić, gdy do gniazda nie są przydzielone żadne węzły. Na przykład -

<my-element>
   #shadow-root
   <slot id = "myimgicon">
      <img src = "img-demo.png">
   </slot>
   <slot></slot>
<my-element>

Możesz podać własną ikonę dla elementu jako -

<my-element>
   <img slot = "myimgicon" src = "warning.png">
<my-element>

Dystrybucja wielopoziomowa

Możesz przydzielić element boksu do boksu, który jest znany jako dystrybucja wielopoziomowa.

Na przykład weź dwa poziomy drzewa cienia, jak pokazano poniżej -

<parent-element>
   #shadow-root
      <child-element>
      <!-- display the light DOM children of parent-element inside child-element -->
      <slot id = "parent-slot">
	  
   <child-element>
      #shadow-root
         <div>
            <!-- Render the light DOM children inside div by using child-element -->
            <slot id = "child-slot">

Rozważ następujący kod -

<parent-element>
   <p>This is light DOM</p>
<parent-element>

Struktura spłaszczonego drzewa wygląda następująco.

<parent-element>
   <child-element>
      <div>
         <slot id = "child-slot">
            <slot id = "parent-slot">
               <p>This is light DOM</p>

Shadow DOM używa następujących API slotów do sprawdzania dystrybucji -

HTMLElement.assignedSlot - Przydziela miejsce na element i zwraca wartość null, jeśli nie ma przypisania elementu do gniazda.
HTMLSlotElement.assignedNodes - Dostarcza listę węzłów wraz z gniazdem i zwraca rozproszone węzły, gdy ustawisz opcję flatten na true.
HTMLSlotElement.slotchange - To zdarzenie jest wyzwalane, gdy nastąpią zmiany w rozproszonych węzłach gniazda.

Retargeting wydarzeń

Określa cel zdarzenia, w którym element może być reprezentowany w tym samym zakresie, co element nasłuchujący. Zapewnia zdarzenie z elementu niestandardowego, które wygląda tak, jakby pochodziło z tagu elementu niestandardowego, w przeciwieństwie do elementu wewnątrz.

Example

Poniższy przykład pokazuje użycie retargetingu zdarzeń w Polymer.js. Utwórz plik o nazwie index.html i umieść 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 = "retarget-event.html">
   </head>
   
   <body>
      <template id = "myapp" is = "dom-bind">
         <retarget-event on-tap = "clicky"></retarget-event>
      </template>
      
      <script>
         var myval = document.querySelector('#myapp');
         myval.clicky = function(e) {
            console.log("The retargeted result:", Polymer.dom(myval));
            console.log("Normal result:", e);
         };
      </script>
   </body>
</html>

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

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "retarget-event">

   <template>
      <span>Click on this text to see result in console...</span>
   </template>

   <script>
      Polymer ({
         is: 'retarget-event',
      });
   </script>
</dom-module>

Output

Aby uruchomić aplikację, przejdź do utworzonego katalogu projektu i uruchom następujące polecenie.

polymer serve

Teraz otwórz przeglądarkę i przejdź do http://127.0.0.1:8081/. Poniżej będzie wynik.

Kliknij powyższy tekst i otwórz konsolę, aby zobaczyć ponownie skierowane zdarzenie, jak pokazano na poniższym zrzucie ekranu.

Stylowanie Shadow DOM

Możesz stylizować cień DOM używając właściwości stylu, które dziedziczą z hosta do drzewa cienia.

Example

<style>
   .mydemo { background-color: grey; }
</style>

<my-element>
#shadow-root
   <style>
      //this div will have blue background color
      div { background-color: orange; }
   </style>
   <div class = "mydemo">Demo</div>

DOM Templating

Poddrzewo DOM można utworzyć dla elementu za pomocą szablonu DOM. Możesz utworzyć cień główny dla elementu i skopiować szablon do drzewa cienia, dodając szablon DOM do elementu.

Szablon DOM można określić na dwa sposoby -

Utwórz element <dom-module>, który powinien pasować do nazwy elementu wraz z atrybutem id.
Zdefiniuj element <template> wewnątrz <dom-module>.

Example

<dom-module id = "my-template">
   <template>I am in my template!!!</template>

   <script>
      class MyTemplate extends Polymer.Element {
         static get is() { return  'my-template' }
      }
      customElements.define(MyTemplate.is, MyTemplate);
   </script>
</dom-module>

Stylizacja Shadow DOM elementu

Shadow DOM umożliwia stylizowanie niestandardowych elementów za pomocą właściwości stylów, takich jak czcionki, kolory tekstu i klasy, bez stosowania ich poza zakresem elementu.

Nadajmy styl elementowi hosta za pomocą :hostselector (element dołączony do Shadow DOM jest nazywany hostem). Utwórz plik o nazwie polimer-app.html i dodaj do niego następujący kod.

<link rel = "import" href = "../../bower_components/polymer/polymer-element.html">

<dom-module id = "polymer-app">
   <template>
      <style>
         :host {
            color:#33ACC9;
         }
      </style>
      <h2>Hello...[[myval]]!</h2>	
  </template>

  <script>
      class PolymerApp extends Polymer.Element {
         static get is() { return 'polymer-app'; }
         static get properties() {
            return {
               myval: {
                  type: String, value: 'Welcome to Tutorialspoint!!!'
               }
            };
         }
      }

      window.customElements.define(PolymerApp.is, PolymerApp);
   </script>
</dom-module>

Uruchom aplikację, jak pokazano w poprzednim rozdziale i przejdź dohttp://127.0.0.1:8000/. Poniżej będzie wynik.

Stylizacja treści z otworami

Jest możliwe do stworzenia slots w szablonie elementu, który jest zajęty w czasie wykonywania.

Example

Poniższy przykład przedstawia użycie zawartości przedziału w szablonie elementu. Utwórz plik index.html i dodaj w nim następujący kod.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "slotted-content.html">
   </head>
   
   <body>
      <slotted-content>
         <div slot = "text">This is Polymer.JS Slotted Content Example</div>
      </slotted-content> 
   </body>
</html>

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

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = "slotted-content">
   <template>
      <style>
         ::slotted(*) {
            font-family: sans-serif;
            color:#E94A9D;
         }
      </style>
      
      <h2>Hello...[[prop1]]</h2>
      <h3>
         <div><slot name='text'></slot></div>
      </h3>
   </template>
   
   <script>
      Polymer ({
         is: 'slotted-content', properties: {
            prop1: {
               type: String,
               value: 'Welcome to Tutorialspoint!!',
            },
         },
      });
   </script>
</dom-module>

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

Korzystanie z modułów stylów

Możesz udostępniać style między elementami wraz z modułami stylów. Określ style w module stylów i udostępnij je między elementami.

Example

Poniższy przykład pokazuje, jak używać modułu stylów między elementami. Utwórz plik index.html i dodaj w nim następujący kod.

<!doctype html>
<html>
   <head>
      <title>Polymer Example</title>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "style-module.html">
   </head>
   
   <body>
      <style-module></style-module> 
   </body>
</html>

Utwórz inny plik o nazwie style-module.html z następującym kodem.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = "style-module">
   <template>
      <!-- here, including the imported styles from colors-module page -->
      <style include="colors-module"></style>
      <style>
         :host {
            font-family: sans-serif;
            color: green;    
         }
      </style>
      
      <h2>Hello...[[prop1]]</h2>
      <p class = "color1">Sharing styles with style modules 1...</p>
      <p class = "color2">Sharing styles with style modules 2...</p>
      <p class = "color3">Sharing styles with style modules 3...</p>
   </template>
   
   <script>
      Polymer ({
         is: 'style-module', properties: {
            prop1: {
               type: String, value: 'Welcome to Tutorialspoint!!',
            },
         },
      });
   </script>
</dom-module>

Teraz utwórz jeszcze jeden plik o nazwie colors-module.html , który dostarcza moduły stylu do elementów, jak pokazano w poniższym kodzie.

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

<dom-module id = 'colors-module'>
   <template>
      <style>
         p.color1 {
            color: #EA5AA5;
         }
         p.color2 {
            color: #4B61EA;
         }
         p.color3 {
            color: #D3AA0A;
         }
      </style>
   </template>
</dom-module>

Uruchom aplikację i przejdź do http://127.0.0.1:8081/. Poniżej będzie wynik.

Użyj właściwości niestandardowych

Niestandardowe właściwości CSS mogą służyć do stylizacji wyglądu elementu w aplikacji za pomocą elementu Polymer. Właściwości niestandardowe udostępniają kaskadowe zmienne CSS, których można używać poza środowiskiem elementów niestandardowych, aby uniknąć rozpraszania danych stylu w arkuszu stylów.

Właściwości niestandardowe można zdefiniować podobnie do standardowych właściwości CSS, które dziedziczą po utworzonym drzewie DOM. W poprzednim przykładzie możesz zobaczyć niestandardowe właściwości CSS zdefiniowane dla elementów.

W przypadku dziedziczenia CSS, jeśli nie ma zdefiniowanego stylu dla elementu, odziedziczy on styl od swojego rodzica, jak pokazano w poniższym kodzie.

<link rel = "import" href = "components/polymer/myelement-style.html">
<myelement-style>
   <style is = "myelement-style">
      p {
         color: var(--paper-red-900);
      }
      paper-checkbox {
         --paper-checkbox-checked-color: var(--paper-red-900);
      }
   </style>
</myelement-style>

<body>
   <p><paper-checkbox>Check Here</paper-checkbox></p>
</body>

Zdarzenia są używane przez elementy, które mogą komunikować się ze zmianami stanu drzewa DOM do elementów nadrzędnych i używają standardowych interfejsów API DOM do tworzenia, wysyłania i nasłuchiwania zdarzeń. Plikannotated event listeners są używane przez Polymer, który definiuje detektory zdarzeń jako małe fragmenty szablonu DOM i mogą być dodawane do elementów potomnych DOM przy użyciu adnotacji onevent w szablonie.

Przykład

Poniższy przykład dodaje do szablonu detektory zdarzeń z adnotacjami. Utwórz plik o nazwie index.html i umieść 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 = "annotated-eventlistners.html">
   </head>
   
   <body>
      <template id = "myapp" is = "dom-bind">
         //tap event is part of gesture events that fires consistently across both mobile
         //and desktop devices
         <annotated-eventlistners on-tap = "myClick"></annotated-eventlistners>
      </template>
      
      <script>
         var myval = document.querySelector('#myapp');
         myval.myClick =  function(e) {
            console.log('Hello World!!!');
         };
      </script>
   </body>
</html>

Wynik

Aby uruchomić aplikację, przejdź do utworzonego katalogu projektu i uruchom następujące polecenie.

polymer serve

Teraz otwórz przeglądarkę i przejdź do http://127.0.0.1:8000/. Poniżej będzie wynik.

Kliknij tekst, aby zobaczyć wynik w konsoli, jak pokazano na poniższym zrzucie ekranu.

Zdarzenia niestandardowe

Zdarzenia niestandardowe można wyzwalać za pomocą standardowego konstruktora CustomEvent i metody dispatchEvent z elementu hosta.

Rozważmy następujący przykład, który wyzwala zdarzenie niestandardowe z elementu hosta. Otwórz plik index.html i dodaj do niego 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 = "custom-event.html">
   </head>
   
   <body>
      <custom-event></custom-event>
      <script>
         document.querySelector('custom-event').addEventListener('customValue', function (e) {
            console.log(e.detail.customval); // true
         })
      </script>
   </body>
</html>

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

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "custom-event">
   <template>
      <h2>Custom Event Example</h2>
      <button on-click = "myClick">Click Here</button>
   </template>
   
   <script>
      Polymer ({
         is: "custom-event", myClick(e) {
            this.dispatchEvent(new CustomEvent('customValue', {detail: {customval: true}}));
         }
      });
   </script>
</dom-module>

Wynik

Uruchom aplikację, jak pokazano w poprzednim przykładzie, i przejdź do http://127.0.0.1:8000/. Poniżej będzie wynik.

Teraz kliknij przycisk, otwórz konsolę i zobacz prawdziwą wartość zdarzenia niestandardowego, jak pokazano na poniższym zrzucie ekranu.

Teraz porusza się z „retargetingiem zdarzeń”, które określa cel zdarzenia, w którym element może być reprezentowany w tym samym zakresie, co element nasłuchujący. Na przykład cel można traktować jako element w dokumencie głównym, podczas korzystania z nasłuchiwania w dokumencie głównym, a nie w drzewie cienia. Można odwołać się cień Polymer dom stylizacji rozdział o więcej wyjaśnień i przykład.

Wydarzenia związane z gestami

Zdarzenia gestów mogą być używane do interakcji użytkownika, które definiują lepszą interakcję zarówno na urządzeniach dotykowych, jak i mobilnych. Na przykład zdarzenie dotknięcia jest częścią zdarzeń związanych z gestami, które są konsekwentnie uruchamiane zarówno na urządzeniach mobilnych, jak i stacjonarnych.

Możesz odnieść się do przykładu zdarzenia gestów wyjaśnionego na początku tego rozdziału, w którym używa się on-tap zdarzenie, które dodaje do szablonu detektory zdarzeń z adnotacjami.

W poniższej tabeli wymieniono różne typy zdarzeń związanych z gestami.

Sr.No.	Typ i opis wydarzenia	Nieruchomości
1	down Określa, że palec / przycisk przesunął się w dół.	x - Zapewnia współrzędną clientX dla zdarzenia. y - Zapewnia koordynację klienta na wydarzenie. sourceEvent - Określa działanie w dół spowodowane zdarzeniem DOM.
2	up Określa, że palec / przycisk został przesunięty w górę.	x - Zapewnia współrzędną clientX dla zdarzenia. y - Zapewnia koordynację klienta na wydarzenie. sourceEvent - Określa działanie w górę spowodowane zdarzeniem DOM.
3	tap Określa występowanie akcji w górę iw dół.	x - Zapewnia współrzędną clientX dla zdarzenia. y - Zapewnia koordynację klienta na wydarzenie. sourceEvent - Określa akcję tap spowodowaną zdarzeniem DOM.
4	track Określa występowanie akcji w górę iw dół.	x - Zapewnia współrzędną clientX dla zdarzenia. y - Zapewnia koordynację klienta na wydarzenie. state - Jest to ciąg typu, który określa stan śledzenia. dx - Poziomo wprowadza zmiany w pikselach podczas śledzenia pierwszego zdarzenia. dy - W pionie wprowadza zmiany w pikselach podczas śledzenia pierwszego zdarzenia. ddx - Poziomo wprowadza zmiany w pikselach, gdy śledzisz ostatnie zdarzenie. ddy - W pionie wprowadza zmiany w pikselach, gdy śledzisz ostatnie zdarzenie. hover() - Służy do określenia aktualnie najechanego elementu.

Przykład

Poniższy przykład określa użycie typów zdarzeń gestów w szablonie. Utwórz plik o nazwie index.html i umieść 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 = "gesture-event.html">
   </head>
   
   <body>
      <gesture-event></gesture-event>
   </body>
</html>

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

<link rel = "import" href = "bower_components/polymer/polymer-element.html">

//it specifies the start of an element's local DOM
<dom-module id = "gesture-event">
   <template>
      <style>
         #box {
            width: 200px;
            height: 200px;
            background: #D7D0B7;
         }
      </style>
      
      <h2>Gesture Event Types Example</h2>
      <div id = "box" on-track = "myClick">{{track_message}}</div>
   </template>
   
   <script>
      Polymer ({
         is: 'gesture-event', myClick: function(e) {
            switch(e.detail.state) {
               case 'start':
               this.track_message = 'Tracking event started...';
               break;
               case 'track':
                  this.track_message = 'Tracking event is in progress... ' +
                  e.detail.x + ', ' + e.detail.y;
               break;
               case 'end':
                  this.track_message = 'Tracking event ended...';
               break;
            }
         }
      });
   </script>
</dom-module>

Wynik

Uruchom aplikację, jak pokazano w poprzednim przykładzie, i przejdź do http://127.0.0.1:8081/. Teraz zacznij przeciągać myszą w elemencie, wyświetli stan, jak pokazano na poniższym zrzucie ekranu.

Po przeciągnięciu myszą w element pokaże postęp śledzenia zdarzeń, jak pokazano na poniższym zrzucie ekranu.

Kiedy przestaniesz przeciągać mysz, zakończy to zdarzenie śledzenia na elemencie, jak pokazano na poniższym zrzucie ekranu.

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) można połączyć 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 za pomocą 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żonych obserwatorów używa się do obserwacji 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 wchodząc w interakcję z utworzonymi węzłami. Dlatego możesz użyć zdarzenia dom-change, aby uzyskać bezpośredni dostęp do węzłów.