Polymer - Kundenspezifische Elemente

Polymer ist ein Framework, mit dem benutzerdefinierte Elemente mit Standard-HTML-Elementen erstellt werden können. Benutzerdefinierte Webelemente bieten die folgenden Funktionen:

• Es bietet einen benutzerdefinierten Elementnamen für die zugeordnete Klasse.

• Wenn Sie den Status der benutzerdefinierten Elementinstanz ändern, werden die Lebenszyklusrückrufe angefordert.

• Wenn Sie die Attribute einer Instanz ändern, wird ein Rückruf angefordert.

Sie können das benutzerdefinierte Element mithilfe der ES6-Klasse definieren, und die Klasse kann dem benutzerdefinierten Element zugeordnet werden, wie im folgenden Code gezeigt.

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

Das benutzerdefinierte Element kann wie unten gezeigt als Standardelement verwendet werden.

<element-demo></element-demo>

Note - Der Name eines benutzerdefinierten Elements sollte mit einem Kleinbuchstaben beginnen und einen Bindestrich zwischen den Namen enthalten.

Benutzerdefinierter Elementlebenszyklus

Der benutzerdefinierte Elementlebenszyklus bietet eine Reihe von benutzerdefinierten Elementreaktionen, die für die Änderung des Elementlebenszyklus verantwortlich sind und in der folgenden Tabelle definiert sind.

Sr.Nr.	Reaktionen & Beschreibung
1	constructor Wenn Sie ein Element erstellen oder das zuvor erstellte Element definieren, wird diese Elementreaktion aufgerufen.
2	connectedCallback Wenn Sie einem Dokument ein Element hinzufügen, wird diese Elementreaktion aufgerufen.
3	disconnectedCallback Wenn Sie ein Element aus einem Dokument entfernen, wird diese Elementreaktion aufgerufen.
4	attributeChangedCallback Jedes Mal, wenn Sie ein Element in einem Dokument ändern, anhängen, entfernen oder ersetzen, wird diese Elementreaktion aufgerufen.

Element-Upgrades

Wir können benutzerdefinierte Elemente verwenden, bevor wir sie durch Spezifikation definieren. Alle vorhandenen Instanzen eines Elements werden durch Hinzufügen einer Definition zu diesem Element auf die benutzerdefinierte Klasse aktualisiert.

Der benutzerdefinierte Elementstatus enthält die folgenden Werte:

• uncustomized - Der gültige Name des benutzerdefinierten Elements ist entweder ein integriertes Element oder ein unbekanntes Element, das nicht zu einem benutzerdefinierten Element werden kann.

• undefined - Das Element kann einen gültigen benutzerdefinierten Elementnamen haben, kann jedoch nicht definiert werden.

• custom - Das Element kann einen gültigen benutzerdefinierten Elementnamen haben, der definiert und aktualisiert werden kann.

• failed - Versuch, das fehlgeschlagene Element einer ungültigen Klasse zu aktualisieren.

Ein Element definieren

Ein benutzerdefiniertes Element kann definiert werden, indem eine Klasse erstellt wird, die Polymer.Element erweitert und die Klasse an die Methode customElements.define übergibt. Die Klasse enthält eine Getter-Methode, die einen HTML-Tag-Namen des benutzerdefinierten Elements zurückgibt. Zum Beispiel -

//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');

Importe und APIs

Die Polymerelemente können durch Angabe der folgenden drei HTML-Importe definiert werden:

• polymer-element.html - Gibt die Basisklasse Polymer.Element an.

• legacy-element.html- Es erweitert Polymer.Element mithilfe der Polymer.LegacyElement-Basisklasse und fügt eine 1.x-kompatible Legacy-API hinzu. Außerdem werden hybride Elemente erstellt, indem die alte Polymer () - Factory-Methode definiert wird.

• polymer.html - Es umfasst die Polymer-Basisklassen sowie Hilfselemente, die in der 1.x polymer.html enthalten waren.

Definieren Sie ein Element im Haupt-HTML-Dokument

Sie können ein Element im Haupt-HTML-Dokument mit der Funktion HTMLImports.whenReady () definieren.

Beispiel

Das folgende Beispiel zeigt, wie Sie ein Element im Haupt-HTML-Dokument definieren. Erstellen Sie eine index.html-Datei und fügen Sie den folgenden Code hinzu.

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

Erstellen Sie nun ein benutzerdefiniertes Element mit dem Namen define-element.html und fügen Sie den folgenden Code hinzu.

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

Ausgabe

Navigieren Sie zum Ausführen der Anwendung zum erstellten Projektverzeichnis und führen Sie den folgenden Befehl aus.

polymer serve

Öffnen Sie nun den Browser und navigieren Sie zu http://127.0.0.1:8081/. Es folgt die Ausgabe.

Definieren Sie ein Legacy-Element

Legacy-Element kann verwendet werden, um ein Element mithilfe der Polymer-Funktion zu registrieren, die den Prototyp für ein neues Element übernimmt. Der Prototyp sollte enthaltenis Hiermit wird der Name des HTML-Tags für ein benutzerdefiniertes Element definiert.

Beispiel

//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();

Lebenszyklus-Rückrufe

Lifecycle-Rückrufe werden verwendet, um die Aufgaben für integrierte Funktionen von auszuführen Polymer.ElementKlasse. Polymer verwendet einen Ready-Callback, der aufgerufen wird, wenn Polymer die Erstellung und Initialisierung von DOM-Elementen abgeschlossen hat.

Im Folgenden finden Sie eine Liste älterer Rückrufe in Polymer.js.

• created - Es wird aufgerufen, wenn Sie ein Element erstellen, bevor Sie die Eigenschaftswerte festlegen und das lokale DOM initialisieren.

• ready - Es wird aufgerufen, wenn Sie ein Element erstellen, nachdem Sie die Eigenschaftswerte festgelegt und das lokale DOM initialisiert haben.

• attached - Es wird nach dem Anhängen des Elements an das Dokument aufgerufen und kann während der gesamten Lebensdauer eines Elements mehrmals aufgerufen werden.

• detached - Es wird nach dem Trennen des Elements vom Dokument aufgerufen und kann während der gesamten Lebensdauer eines Elements mehrmals aufgerufen werden.

• attributeChanged - Es wird aufgerufen, wenn Änderungen an den Attributen eines Elements vorgenommen wurden, und enthält die Attributänderungen, die nicht mit den deklarierten Eigenschaften kompatibel sind.

Eigenschaften deklarieren

Die Eigenschaften können für ein Element deklariert werden, um Standardwerte und andere spezifische Funktionen im Datensystem hinzuzufügen, und sie können verwendet werden, um die folgenden Funktionen anzugeben:

• Es gibt den Eigenschaftstyp und den Standardwert an.

• Es ruft die Beobachtermethode auf, wenn sich der Eigenschaftswert ändert.

• Es gibt den schreibgeschützten Status an, um die unerwarteten Änderungen am Eigenschaftswert zu stoppen.

• Es bietet Unterstützung für die bidirektionale Datenbindung, die ein Ereignis auslöst, wenn Sie die Eigenschaftswerte ändern.

• Es ist eine berechnete Eigenschaft, die einen Wert in Abhängigkeit von den anderen Eigenschaften dynamisch berechnet.

• Es aktualisiert und spiegelt den entsprechenden Attributwert wider, wenn Sie die Eigenschaftswerte ändern.

Die folgende Tabelle zeigt Schlüssel für jede Eigenschaft, die vom Eigenschaftenobjekt unterstützt werden.

Sr.Nr.	Schlüssel & Beschreibung	Art
1	type Es deserialisiert von einem Attribut, dessen Eigenschaftstyp mithilfe des Konstruktors des Typs bestimmt wird.	Konstruktor (Boolescher Wert, Datum, Nummer, Zeichenfolge, Array oder Objekt)
2	value Es gibt den Standardwert für die Eigenschaft an. Wenn es sich um eine Funktion handelt, wird der Rückgabewert als Standardwert für die Eigenschaft verwendet.	Boolescher Wert, Zahl, Zeichenfolge oder Funktion.
3	reflectToAttribute Wenn dieser Schlüssel auf true gesetzt ist, wird das entsprechende Attribut auf dem Hostknoten festgelegt. Das Attribut kann als Standard-HTML-Boolesches Attribut erstellt werden, wenn Sie den Eigenschaftswert als Boolesch festlegen.	Boolescher Wert
4	readOnly Sie können die Eigenschaft nicht direkt durch Zuweisung oder Datenbindung festlegen, wenn dieser Schlüssel auf true festgelegt ist.	Boolescher Wert
5	notify Sie können die Eigenschaft für die bidirektionale Datenbindung verwenden. Wenn dieser Schlüssel auf true gesetzt ist und Sie die Eigenschaft ändern, wird ein Ereignis ausgelöst, bei dem der Eigenschaftsname geändert wurde.	Boolescher Wert
6	computed Sie können den Wert eines Arguments bei jeder Änderung berechnen, indem Sie die Methode aufrufen. Der Wert wird als Methodenname und Argumentliste vereinfacht.	Zeichenfolge
7	observer Rufen Sie den Methodennamen auf, der durch einen Wert vereinfacht wird, wenn sich der Eigenschaftswert ändert.	Zeichenfolge

Attribut Deserialisierung

Deserialisieren Sie den Eigenschaftsnamen, der einem Attribut für eine Instanz entspricht, gemäß dem angegebenen Typ und demselben Eigenschaftsnamen für die Elementinstanz, wenn die Eigenschaft im Eigenschaftenobjekt konfiguriert ist.

Sie können den angegebenen Typ direkt als Wert für die Eigenschaft festlegen, wenn im Eigenschaftenobjekt keine anderen Eigenschaftenoptionen definiert sind. Andernfalls wird der Wert für den Typschlüssel im Konfigurationsobjekt der Eigenschaften bereitgestellt.

Boolesche Eigenschaften konfigurieren

Die Boolesche Eigenschaft kann aus dem Markup heraus konfiguriert werden, indem sie auf false gesetzt wird. Wenn sie auf true gesetzt ist, können Sie sie nicht aus dem Markup heraus konfigurieren, da das Attribut mit oder ohne Wert mit true ausgeglichen wird. Daher ist es als Standardverhalten für Attribute in der Webplattform bekannt.

Die Objekt- und Array-Eigenschaften können konfiguriert werden, indem sie im JSON-Format als - übergeben werden

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

Standardeigenschaftswerte konfigurieren

Die Standardeigenschaft kann mithilfe des Wertefelds im Eigenschaftenobjekt konfiguriert werden. Sie kann entweder ein primitiver Wert oder eine Funktion sein, die einen Wert zurückgibt.

Beispiel

Das folgende Beispiel zeigt, wie die Standardeigenschaftswerte im Eigenschaftenobjekt konfiguriert werden.

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

Ausgabe

Führen Sie die Anwendung wie im vorherigen Beispiel gezeigt aus und navigieren Sie zu http://127.0.0.1:8000/. Es folgt die Ausgabe.

Schreibgeschützte Eigenschaften

Sie können unerwartete Änderungen an erzeugten Daten vermeiden, indem Sie das readOnly-Flag im Eigenschaftenobjekt auf true setzen. Element verwendet den Setter der Konvention _setProperty (Wert), um den Eigenschaftswert zu ändern.

Beispiel

Das folgende Beispiel zeigt die Verwendung schreibgeschützter Eigenschaften im Eigenschaftenobjekt. Erstellen Sie eine index.html-Datei und fügen Sie den folgenden Code hinzu

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

Erstellen Sie nun eine weitere Datei mit dem Namen my-element.html und fügen Sie den folgenden Code hinzu.

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

Erstellen Sie als Nächstes eine weitere Datei mit dem Namen prop-element.html und fügen Sie den folgenden Code hinzu.

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

Ausgabe

Führen Sie die Anwendung wie im vorherigen Beispiel gezeigt aus und navigieren Sie zu http://127.0.0.1:8081/. Es folgt die Ausgabe.

Nach dem Klicken auf die Schaltfläche wird der Wert wie im folgenden Screenshot gezeigt geändert.

Eigenschaften auf Attribute reflektieren

Das HTML-Attribut kann durch Festlegen von mit dem Eigenschaftswert synchronisiert werden reflectToAttribute auf true für eine Eigenschaft im Eigenschaftenkonfigurationsobjekt.

Attribut-Serialisierung

Der Eigenschaftswert kann für das Attribut serialisiert werden, während eine Eigenschaft an ein Attribut reflektiert oder gebunden wird. Standardmäßig können Werte abhängig vom aktuellen Typ des Werts serialisiert werden.

• String - Eine Serialisierung ist nicht erforderlich.

• Date or Number - Verwenden Sie den toString, um die Werte zu serialisieren.

• Boolean - Setzen Sie das angezeigte nicht bewertete Attribut entweder auf wahr oder auf falsch.

• Array or Object - Verwenden Sie JSON.stringify, um den Wert zu serialisieren.