Polymer 1.0 problems with dom-repeat

Question

Hope someone can help me. I am very upset. :-( I cannot figure out how to use the new dom-repeat pattern with polymer 1.0.

I want to show the same elements from firebase in the list of user elements, but if I load elements from firebase, the custom-element-list will not be populated with elements.

See Codex. MANY THANKS. Meanwhile.

Custom Element: my-uebersicht

<dom-module id="my-uebersicht">
  <style>
    :host {
      display: block;
    }

    #fabTest {
      position: absolute !important;
      right: 10px;
      top: 10px;
    }
  </style>
  <template>
    <h1 class="paper-font-display1"><span>Übersicht</span></h1>
 
    <my-zeiteintrag-list zeiteintraege="{{zeiteintraege}}"></my-zeiteintrag-list>
 
    <paper-fab id="fabTest" mini icon="polymer" on-click="loadUebersicht"></paper-fab>
  </template>
</dom-module>
 
<script>
  (function() {
    Polymer({
      is: 'my-uebersicht',

      routeTo: function(route) {
        document.querySelector('#app').route = route;
      },

      loadUebersicht: function() {
        var id = document.querySelector('#app').getUserId();
        var uname = document.querySelector('#app').getUsername();

        if ((typeof id === 'undefined') || (typeof uname === 'undefined')) {
          this.routeTo('login');
        }

        var that = this;
        var rootRef = new Firebase("https://<FIREBASE.com>/" + id);
        rootRef.on("value", function(snapshot) {

          snapshot.forEach(function(child) {

            var zeintrag = child.val();
            that.zeiteintraege.push(zeintrag);

          });
        });
      },

      ready: function() {
        this.zeiteintraege = [];
      }
    })
  })();
</script>

Run codeHide result

Custom Element: my-zeiteintrag-list

<dom-module id="my-zeiteintrag-list">
    <style>
      :host {
        display: block;
      }
    </style>
  <template>
 
    <template is="dom-repeat" items="{{zeiteintraege}}">
      <my-zeiteintrag-item zeiteintrag="{{item}}"></my-zeiteintrag-item>
    </template>
 
  </template>
</dom-module>
<script>
  (function () {
    Polymer({
      is: 'my-zeiteintrag-list',

      properties: {
        zeiteintraege: {
          type: Array,
          value: [],
          notify: true,
          reflectToAttribute: true
        }
      },

      ready: function() {
        this.zeiteintraege = this.zeiteintraege || [];
      }
    });
  })();
</script>

Run codeHide result

Custom Element: my-zeiteintrag-item

<dom-module id="my-zeiteintrag-item">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
 
    <paper-material elevation="1">
      <ul>
        <li>Projekt: <span class="paper-font-body1">{{zeiteintrag.projekt}}</span></li>
        <li>Vorgang: <span class="paper-font-body1">{{zeiteintrag.vorgang}}</span></li>
        <li>Artikel: <span class="paper-font-body1">{{zeiteintrag.artikel}}</span></li>
        <li>Datum: <span class="paper-font-body1">{{zeiteintrag.datum}}</span></li>
        <li>Dauer: <span class="paper-font-body1">{{zeiteintrag.dauer}}</span></li>
        <li>Bemerkung: <span class="paper-font-body1">{{zeiteintrag.bemerkung}}</span></li>
      </ul>
    </paper-material>
 
  </template>
</dom-module>
 
<script>
  (function () {
    Polymer({
      is: 'my-zeiteintrag-item',

      properties: {
        zeiteintrag: {
          type: Object,
          value: {},
          notify: true,
          reflectToAttribute: true
        }
      },

      ready: function() {
        this.zeiteintrag = this.zeiteintrag || {};
      }
    });
  })();
</script>

Run codeHide result

[EDIT] - found a solution

dom-repeat Polymer Slack Chat Github Issue . Polymer (push, pop, splice, shift, unshift) , .

:

: my-uebersicht

<script>
  (function() {
    Polymer({
      is: 'my-uebersicht',

      routeTo: function(route) {
        document.querySelector('#app').route = route;
      },

      loadUebersicht: function() {
        var id = document.querySelector('#app').getUserId();
        var uname = document.querySelector('#app').getUsername();

        if ((typeof id === 'undefined') || (typeof uname === 'undefined')) {
          this.routeTo('login');
        }

        var that = this;
        var rootRef = new Firebase('https://<FIREBASE>.com/erfassung/' + id);
        rootRef.on('value', function(snapshot) {

          that.zeiteintraege = [];

          snapshot.forEach(function(child) {
            var zeintrag = child.val();
            that.push('zeiteintraege', zeintrag); //THIS IS ALL!!!
          });
        });
      },

      ready: function() {
        this.zeiteintraege = [];
      }
    });
  })();
</script>

Hide result

Answer 1

, - :

<dom-module id="my-zeiteintrag-list">
  <template>
    <template is="dom-repeat" items="zeiteintraglist">
      <div>
        <span>{{item.name}}</span><br />
        <span>{{item.country}}</span>, <span>{{item.phone}}</span>.<br />
        <span><a href$="{{generateEmailLink(item.email)}}"><span>{{item.email}}</span></a></span>
      </div>
    </template>
  </template>
</dom-module>

<!--Script section starts -->
<script>
  (function () {
          Polymer({
              // define element prototype here
              is: 'my-zeiteintrag-list',
              generateEmailLink: function(value)  {
                //Computed property, since 1.0 does not allow string concatenation
                return "mailto:" + value;
              },
              ready: function () {
                  this.zeiteintraglist = [
                    { "name": "John Doe", "country": "USA", "phone": "1 202 303 4567", "email": "[e-mail]"},
                    { "name": "Sara O'coner", "country": "USA", "phone": "1 202 303 4567", "email": "[e-mail]"}
                  ];
              }
          });
      })();
</script>

Hide result

Answer 2

, . , . . , Polymer , , . , . , push, pop, shift, unshift splice, .

. ( , this.set), , , , .