Polymer - Atribute custom

postat acum 3 ani 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

Comentariu postate de download minecraft free la data de 14.05.2019
I read this piece of writing completely about the resemblance of latest and previous technologies, it's awesome article.
Comentariu postate de mojang minecraft download la data de 15.05.2019
I am sure this piece of writing has touched all the internet people, its really really pleasant post on building up new blog.
Comentariu postate de how to download minecraft la data de 16.05.2019
This web site really has all the info I needed concerning this subject and didn't know who to ask.
Comentariu postate de minecraft download la data de 16.05.2019
Great items from you, man. I have remember your stuff previous to and you're simply extremely excellent. I really like what you've received here, certainly like what you are stating and the way in which in which you assert it. You're making it enjoyable and you continue to take care of to keep it wise. I cant wait to read much more from you. That is really a wonderful website.
Comentariu postate de free minecraft download la data de 17.05.2019
I'm not sure where you're getting your information, but good topic. I must spend some time studying more or figuring out more. Thanks for fantastic information I was searching for this information for my mission.
Comentariu postate de minecraft pc download la data de 17.05.2019
I know this if off topic but I'm looking into starting my own weblog and was curious what all is required to get set up? I'm assuming having a blog like yours would cost a pretty penny? I'm not very web savvy so I'm not 100% certain. Any recommendations or advice would be greatly appreciated. Kudos