Polymer - Iterarea

Polymer | Stefanescu Mihai | 2020-10-11

In acest articol din serie am sa vorbesc despre iterara in interiorul unui element polymer. Am sa folosesc codul initial, in care am sa scriu un array in interorul functiei ready astfel:

  <script>
      Polymer({
          is: "salut-ip",
          ready: function(){
            this.mancaruri = [
              {mancare: 'Pizza'},
              {mancare: 'Kebab'},
              {mancare: 'Pita Gyros'},
            ];
          }
          });
  </script>

Acum, pentru a folosi acest array in elemental nostru (probabil va ganditi deja la un for sau un foreach), dar de fapt vom folosi dom-repeat:

<template is="dom-repeat" items="{{mancaruri}}">

Puteti observati va in atributul items am pus numele array-ului creat mai devreme.

Iata cum am folosit acest dom-repeat:

    <ul>
      <template is="dom-repeat" items="{{mancaruri}}">
        <li>{{item.mancare}}</li>
      </template>
    </ul>

Acesta este fisierul meu final:

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

<dom-module id="salut-ip">
  <template>
    <h1>Lista mancare</h1>
    <ul>
      <template is="dom-repeat" items="{{mancaruri}}">
        <li>{{item.mancare}}</li>
      </template>
    </ul>
  </template>
  <script>
      Polymer({
          is: "salut-ip",
          ready: function(){
            this.mancaruri = [
              {mancare: 'Pizza'},
              {mancare: 'Kebab'},
              {mancare: 'Pita Gyros'},
            ];
          }
          });
  </script>
</dom-module>

Si acesta este rezultatul:



Imi place ce faci aici
Daca iti place ce fac aici imi poti cumpara o cafea Buy Me a Coffee at ko-fi.com

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.
       

Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.

🗝ïļ Login 🌟 Register

🔖 Bookmarks ⊞
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord ⊞

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.

⮆ïļ