Polimer - Özel Öğeler

Polimer, standart HTML öğeleri kullanarak özel öğeler oluşturmaya izin veren bir çerçevedir. Özel web öğeleri aşağıdaki özellikleri sağlar -

İlişkili sınıfla birlikte özel öğe adı sağlar.
Özel öğe örneğinin durumunu değiştirdiğinizde, yaşam döngüsü geri aramalarını isteyecektir.
Bir örnekteki öznitelikleri değiştirirseniz, geri arama istenir.

Özel öğeyi ES6 sınıfını kullanarak tanımlayabilirsiniz ve sınıf, aşağıdaki kodda gösterildiği gibi özel öğe ile ilişkilendirilebilir.

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

Özel öğe, aşağıda gösterildiği gibi standart bir öğe olarak kullanılabilir -

<element-demo></element-demo>

Note - Özel öğe adı küçük harfle başlamalı ve adlar arasında kısa çizgi olmalıdır.

Özel Öğe Yaşam Döngüsü

Özel öğe yaşam döngüsü, öğe yaşam döngüsündeki değişiklikten sorumlu olan ve aşağıdaki tabloda tanımlanan bir dizi özel öğe reaksiyonu sağlar.

Sr.No.	Tepkiler ve Açıklama
1	constructor Bir öğe oluşturduğunuzda veya önceden oluşturulmuş öğeyi tanımladığınızda, bu öğe reaksiyonu çağrılacaktır.
2	connectedCallback Bir belgeye bir öğe eklediğinizde, bu öğe tepkisi çağrılacaktır.
3	disconnectedCallback Bir belgeden bir öğeyi kaldırdığınızda, bu öğe tepkisi çağrılacaktır.
4	attributeChangedCallback Bir belgedeki bir öğeyi değiştirdiğinizde, eklediğinizde, kaldırdığınızda veya değiştirdiğinizde, bu öğe tepkisi çağrılacaktır.

Öğe Yükseltmeleri

Özel öğeleri, spesifikasyona göre tanımlamadan önce kullanabiliriz ve bir öğenin mevcut herhangi bir örneği, o öğeye bir tanım eklenerek özel sınıfa yükseltilecektir.

Özel öğe durumu aşağıdaki değerleri içerir -

uncustomized - Geçerli özel öğe adı, yerleşik bir öğe veya bilinmeyen bir öğedir ve özel öğe olamaz.
undefined - Öğenin geçerli bir özel öğe adı olabilir, ancak tanımlanamaz.
custom - Öğe, tanımlanabilen ve yükseltilebilen geçerli bir özel öğe adına sahip olabilir.
failed - Geçersiz bir sınıfın başarısız öğesini yükseltmeye çalışılıyor.

Bir Eleman Tanımlama

Polymer.Element öğesini genişleten ve sınıfı customElements.define yöntemine geçiren bir sınıf oluşturularak özel bir öğe tanımlanabilir. Sınıf, özel öğenin bir HTML etiket adını döndüren alıcı yöntemidir. Örneğin -

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

İçe aktarmalar ve API'ler

Polimer öğeler, aşağıdaki üç HTML içe aktarımı belirtilerek tanımlanabilir -

polymer-element.html - Polymer.Element temel sınıfını belirtir.
legacy-element.html- Polymer.Element'i Polymer.LegacyElement temel sınıfını kullanarak genişletir ve 1.x uyumlu eski API ekler. Ayrıca eski Polymer () fabrika yöntemini tanımlayarak hibrit öğeler oluşturur.
polymer.html - 1.x polymer.html'de bulunan yardımcı öğelerle birlikte Polimer temel sınıflarını içerir.

Ana HTML Belgesinde bir Eleman Tanımlayın

HTMLImports.whenReady () işlevini kullanarak ana HTML belgesinde bir öğe tanımlayabilirsiniz.

Misal

Aşağıdaki örnek, ana HTML belgesinde bir öğenin nasıl tanımlanacağını gösterir. Bir index.html dosyası oluşturun ve aşağıdaki kodu ekleyin.

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

Şimdi define-element.html adında özel bir öğe oluşturun ve aşağıdaki kodu ekleyin.

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

Çıktı

Uygulamayı çalıştırmak için, oluşturulan proje dizinine gidin ve aşağıdaki komutu çalıştırın.

polymer serve

Şimdi tarayıcıyı açın ve şuraya gidin: http://127.0.0.1:8081/. Aşağıdakiler çıktı olacaktır.

Eski Bir Öğe Tanımlayın

Eski öğe, yeni bir öğenin prototipini alan Polimer işlevi kullanılarak bir öğeyi kaydetmek için kullanılabilir. Prototip şunları içermelidir:is özel bir öğenin HTML etiket adını tanımlayan.

Misal

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

Yaşam Döngüsü Geri Aramaları

Yaşam döngüsü geri aramaları, aşağıdakilerin yerleşik özelliklerinin görevlerini gerçekleştirmek için kullanılır. Polymer.Elementsınıf. Polymer, Polymer DOM öğelerini oluşturmayı ve başlatmayı tamamladığında çağrılacak olan hazır geri çağrıyı kullanır.

Aşağıda, Polymer.js'deki eski geri aramaların bir listesi bulunmaktadır.

created - Özellik değerlerini ayarlamadan ve yerel DOM'u başlatmadan önce bir öğe oluşturduğunuzda çağrılır.
ready - Özellik değerlerini ayarladıktan ve yerel DOM'u başlattıktan sonra bir öğe oluşturduğunuzda çağrılır.
attached - Belgeye eleman eklendikten sonra çağrılır ve bir elemanın kullanım ömrü boyunca birden fazla kez çağrılabilir.
detached - Eleman belgeden ayrıldıktan sonra çağrılır ve bir elemanın kullanım ömrü boyunca birden fazla çağrılabilir.
attributeChanged - Bir elemanın özniteliklerinde değişiklik olduğunda çağrılır ve bildirilen özelliklerle uyumlu olmayan öznitelik değişikliklerini tutar.

Özellikleri Bildirme

Özellikler, veri sistemine varsayılan değer ve diğer belirli özellikler eklemek için bir öğe üzerinde bildirilebilir ve aşağıdaki özellikleri belirtmek için kullanılabilir -

Özellik türünü ve varsayılan değeri belirtir.
Özellik değerinde değişiklik olduğunda gözlemci yöntemini çağırır.
Özellik değerinde beklenmedik değişiklikleri durdurmak için salt okunur durumunu belirtir.
Özellik değerlerini değiştirdiğinizde bir olayı tetikleyen iki yönlü veri bağlama desteği sağlar.
Diğer özelliklere bağlı olarak dinamik olarak bir değer hesaplayan hesaplanmış bir özelliktir.
Özellik değerlerini değiştirdiğinizde, ilgili öznitelik değerini günceller ve yansıtır.

Aşağıdaki tablo, özellikler nesnesi tarafından desteklenen her özellik için anahtarları gösterir.

Sr.No.	Anahtar ve Açıklama	Tür
1	type Özellik türü, türün yapıcısı kullanılarak belirlenen bir öznitelikten seriyi kaldırır.	yapıcı (Boolean, Date, Number, String, Array veya Object)
2	value Özelliğin varsayılan değerini belirtir ve bir işlevse, geri dönüş değerini özelliğin varsayılan değeri olarak kullanır.	boole, sayı, dize veya işlev.
3	reflectToAttribute Bu anahtar true olarak ayarlanırsa, ana bilgisayar düğümünde karşılık gelen özniteliği ayarlar. Özellik değerini Boolean olarak ayarlarsanız, nitelik standart bir HTML boole niteliği olarak oluşturulabilir.	Boole
4	readOnly Bu anahtar true olarak ayarlanmışsa, özelliği doğrudan atama veya veri bağlamayla ayarlayamazsınız.	Boole
5	notify Özelliği iki yönlü veri bağlama için kullanabilirsiniz, bu anahtar true olarak ayarlanırsa ve özelliği değiştirdiğinizde, özellik-adı-değiştirildi olayı tetiklenir.	Boole
6	computed Bir bağımsız değişkenin değerini, yöntemi çağırarak her değiştiğinde hesaplayabilirsiniz ve değer, yöntem adı ve bağımsız değişken listesi olarak basitleştirilecektir.	dizi
7	observer Özellik değeri değiştiğinde, bir değerle basitleştirilen yöntem adını çağırın.	dizi

Nitelik Serisini Kaldırma

Özellik, özellikler nesnesinde yapılandırılmışsa, belirtilen türe ve öğe örneğindeki aynı özellik adına göre örnekteki bir öznitelikle eşleşen özellik adının serisini kaldırın.

Özellikler nesnesinde tanımlanmış başka özellik seçeneği yoksa, belirtilen türü doğrudan özelliğin değeri olarak ayarlayabilirsiniz; aksi takdirde, özellikler yapılandırma nesnesindeki tür anahtarına değer sağlayacaktır.

Boole Özelliklerini Yapılandırma

Boolean özelliği, işaretlemeden false olarak ayarlanarak yapılandırılabilir ve eğer true olarak ayarlanmışsa, o zaman bir değere sahip olan veya olmayan öznitelik true değerine eşitlendiği için işaretlemeden yapılandıramazsınız. Bu nedenle, web platformundaki özellikler için standart bir davranış olarak bilinir.

Nesne ve dizi özellikleri, JSON biçiminde şu şekilde iletilerek yapılandırılabilir:

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

Varsayılan Özellik Değerlerini Yapılandırma

Varsayılan özellik, özellikler nesnesindeki değer alanı kullanılarak yapılandırılabilir ve ilkel değer veya bir değer döndüren bir işlev olabilir.

Misal

Aşağıdaki örnek, özellikler nesnesinde varsayılan özellik değerlerinin nasıl yapılandırılacağını gösterir.

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

Çıktı

Uygulamayı önceki örnekte gösterildiği gibi çalıştırın ve şuraya gidin: http://127.0.0.1:8000/. Aşağıdakiler çıktı olacaktır.

Salt Okunur Özellikler

Properties nesnesinde readOnly bayrağını true olarak ayarlayarak üretilen verilerde beklenmeyen değişiklikleri önleyebilirsiniz. Öğe, özellik değerini değiştirmek için _setProperty (değer) kuralının belirleyicisini kullanır.

Misal

Aşağıdaki örnek, özellikler nesnesinde salt okunur özelliklerin kullanımını tasvir etmektedir. Bir index.html dosyası oluşturun ve içine aşağıdaki kodu ekleyin

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

Şimdi, my-element.html adında başka bir dosya oluşturun ve aşağıdaki kodu ekleyin.

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

Ardından, prop-element.html adında bir dosya daha oluşturun ve aşağıdaki kodu ekleyin.

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

Çıktı

Uygulamayı önceki örnekte gösterildiği gibi çalıştırın ve şuraya gidin: http://127.0.0.1:8081/. Aşağıdakiler çıktı olacaktır.

Düğmeye tıkladıktan sonra, aşağıdaki ekran görüntüsünde gösterildiği gibi değeri değiştirecektir.

Özellikleri Niteliklere Yansıtma

HTML niteliği, özellik değeriyle senkronize edilebilir. reflectToAttribute özellikler yapılandırma nesnesindeki bir özellik için true.

Öznitelik Serileştirme

Özellik değeri, bir özelliği bir özniteliğe yansıtırken veya bağlarken özniteliğe serileştirilebilir ve varsayılan olarak değerler, değerin geçerli türüne bağlı olarak serileştirilebilir.

String - Serileştirmeye gerek yoktur.
Date or Number - Değerleri serileştirmek için toString'i kullanın.
Boolean - Görüntülenen değerli olmayan özniteliği doğru veya yanlış olarak ayarlayın.
Array or Object - Değeri serileştirmek için JSON.stringify kullanın.