- Stefanescu Mihai a postat in Paginare in PHP
- johhny a postat in Paginare in PHP
- Stefanescu Mihai a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- madalin a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- Stefanescu Mihai a postat in Featureuri site
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:
Comentarii
Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!