Polymer - Atribute custom

postat acum un an de Stefanescu Mihai in categorie Polymer

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:

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group