Looping, the template dom-repeat.

A basic list

This is a basic polymer element that show a list of names.

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

<dom-module id="basic-list">

    <div>Name's list</div>
    <template is="dom-repeat" items="{{list}}">
        <div>{{item.lastName}}, {{item.firstName}}</div>
    </template >


      is: 'basic-list',

          type: Array,
          value: function(){
            let list = [
              {firstName: "Alice", lastName: "Boarque"},
              {firstNName: "Carlos, lastName: "Dutra"}

            return list

Specifying an element in a list

By default, accessing an individual item in a template dom-repeat loop is by calling {{item}}. Passing in an as= attribute to template will allow you to switch out the default {{item}} syntax for something that is more customized to the module you are working with. In this case, we want to grab the first and last name of a person, so we pass in as="person" to template. We can now access the names using {{person}}.

<dom-module id="basic-list">
    <template is="dom-repeat" items={{list}} as="person">
      <div>{{person.lastName}}, {{person.firstName}}</div>