Polymer - Iterarea

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: