Polymer - Atribute custom

Polymer ne permite sa ne scriem noi propriile attribute pentru un anumit element, iar acele attribute pot fi folosite in interiorul elementului.

Acum, gandindu-ne ca nu dorim ca elemental polymer sa afiseze mereu mesajul static “Salut www.Invata-Programare.ro”, ci ne dorim sa afiseze un mesaj custom.

Primul lucru pe care trebuie sa-l facem este sa scriem atributul in elemental polymer astfel:

<span id="name"></span>

Atentie, id-ul trebuie sa fie acelasi ca al numelui atributului dorit.

Acum, javascriptul Polymer trebuie sa scrie urmatorul cod:

          properties: {
            name: {
              type: Object,
              observer: 'getName'
            }
          },

Unde name este numele atributului, type este tipul (eu am ales sa-l fac Object, dar puteam la fel de simplu sa-l fac String sau alt tip de data), iar la observer trecem numele functiei care sa se ocupe de setarea acestui atribut.

Iata si functia de numita in observer:

          getName: function () {
              this.$.name.textContent = this.name;
          }

!Atentie: this.name se refera la valoarea atributului name data elementului polymer.

Codul din elementul meu polymer arata astfel acum:

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

<dom-module id="salut-ip">
  <template>
    <style>
      .element-heading{
          font-family: monospace;
          text-shadow: 1px 1px 3px black;
      }
    </style>
	<h1 class="element-heading">Salut <span id="name"></span></h1>
  </template>
  <script>
      Polymer({
          is: "salut-ip",
          properties: {
            name: {
              type: Object,
              observer: 'getName'
            }
          },
          getName: function () {
              this.$.name.textContent = this.name;
          },
          });
  </script>
</dom-module>

Iar in index.html am acest cod:

<!DOCTYPE html>
<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link href="elements/salut-ip.html" rel="import">
    </head>
    <body>
    <salut-ip name="Mihai"></salut-ip>
</html>

Se poate observa ca elementul <salut-ip> are acum un atribut name cu valoarea Mihai, iar mai jos aveti rezultatul meu:

Avem un cod de conduita.
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.