Polimer - elementy niestandardowe

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 albo element wbudowany, albo 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 przyjmuje 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 podczas tworzenia elementu 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ść obliczeniowa, 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 logiczny 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

Deserializuj 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 generowanych 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 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 = "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ść.