CODEWITHSUNDEEP
javascriptpolymer-2.x
AaronNGray
AaronNGray

Reputation: 132

Polymer 2.0 basic dom-repeat list example not working

I am trying to get a basic dom-repeat working with Polymer 2.0

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="dom-repeat-test">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>[[title]]!</h2>
    <template is="dom-repeat" items="{{employees}}">
        <div>First name: <span>{{item.first}}</span></div>
        <div>Last name: <span>{{item.last}}</span></div>
    </template>
  </template>
  <script>
    /**
     * @customElement
     * @polymer
     */
    class DomRepeatTest extends Polymer.Element {
      static get is() { return 'dom-repeat-test'; }
      static get properties() {
        return {
          title: {
            type: String,
            value: 'dom-repeat-test'
          },
          employees: {
            type: Array,
            value: [
              {first: 'Bob', last: 'Smith'},
              {first: 'Sally', last: 'Johnson'}
            ]
          }
        };
      }
    }
    window.customElements.define(DomRepeatTest.is, DomRepeatTest);
  </script>
</dom-module>

I am getting an empty dom-repeat element in the output in the inspector but no elements in it and also no errors in the console.

Heres the code :- https://github.com/AaronNGray/polymer-dom-repeat-test

Upvotes: 0

Views: 1485

Answers (1)

Frank R.
Frank R.

Reputation: 1832

If you're not importing polymer.html, import dom-repeat.html.

<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

See https://www.polymer-project.org/2.0/docs/devguide/templates#dom-repeat

Upvotes: 4

Related Questions