title: Polymer 1.0 Problems with dom-repeat
body: <p>I hope someone could help me. I'm really frustrated. :-( I can't figure out how to use the new dom-repeat template with polymer 1.0. </p>
  
  <p>I want to show same items from firebase in a custom-element-list, but if I load the items from firebase, my custom-element-list doesn't fill with the items. </p>
  
  <p>Please see the Code. BIG THANKS in the meantime.</p>
  
  <p><strong>Custom Element: my-uebersicht</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dom-module id="my-uebersicht"&gt;
    &lt;style&gt;
      :host {
        display: block;
      }
  
      #fabTest {
        position: absolute !important;
        right: 10px;
        top: 10px;
      }
    &lt;/style&gt;
    &lt;template&gt;
      &lt;h1 class="paper-font-display1"&gt;&lt;span&gt;Übersicht&lt;/span&gt;&lt;/h1&gt;
   
      &lt;my-zeiteintrag-list zeiteintraege="{{zeiteintraege}}"&gt;&lt;/my-zeiteintrag-list&gt;
   
      &lt;paper-fab id="fabTest" mini icon="polymer" on-click="loadUebersicht"&gt;&lt;/paper-fab&gt;
    &lt;/template&gt;
  &lt;/dom-module&gt;
   
  &lt;script&gt;
    (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://&lt;FIREBASE.com&gt;/" + id);
          rootRef.on("value", function(snapshot) {
  
            snapshot.forEach(function(child) {
  
              var zeintrag = child.val();
              that.zeiteintraege.push(zeintrag);
  
            });
          });
        },
  
        ready: function() {
          this.zeiteintraege = [];
        }
      })
    })();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Custom Element: my-zeiteintrag-list</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dom-module id="my-zeiteintrag-list"&gt;
      &lt;style&gt;
        :host {
          display: block;
        }
      &lt;/style&gt;
    &lt;template&gt;
   
      &lt;template is="dom-repeat" items="{{zeiteintraege}}"&gt;
        &lt;my-zeiteintrag-item zeiteintrag="{{item}}"&gt;&lt;/my-zeiteintrag-item&gt;
      &lt;/template&gt;
   
    &lt;/template&gt;
  &lt;/dom-module&gt;
  &lt;script&gt;
    (function () {
      Polymer({
        is: 'my-zeiteintrag-list',
  
        properties: {
          zeiteintraege: {
            type: Array,
            value: [],
            notify: true,
            reflectToAttribute: true
          }
        },
  
        ready: function() {
          this.zeiteintraege = this.zeiteintraege || [];
        }
      });
    })();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Custom Element: my-zeiteintrag-item</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dom-module id="my-zeiteintrag-item"&gt;
    &lt;style&gt;
      :host {
        display: block;
      }
    &lt;/style&gt;
    &lt;template&gt;
   
      &lt;paper-material elevation="1"&gt;
        &lt;ul&gt;
          &lt;li&gt;Projekt: &lt;span class="paper-font-body1"&gt;{{zeiteintrag.projekt}}&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Vorgang: &lt;span class="paper-font-body1"&gt;{{zeiteintrag.vorgang}}&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Artikel: &lt;span class="paper-font-body1"&gt;{{zeiteintrag.artikel}}&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Datum: &lt;span class="paper-font-body1"&gt;{{zeiteintrag.datum}}&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Dauer: &lt;span class="paper-font-body1"&gt;{{zeiteintrag.dauer}}&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Bemerkung: &lt;span class="paper-font-body1"&gt;{{zeiteintrag.bemerkung}}&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/paper-material&gt;
   
    &lt;/template&gt;
  &lt;/dom-module&gt;
   
  &lt;script&gt;
    (function () {
      Polymer({
        is: 'my-zeiteintrag-item',
  
        properties: {
          zeiteintrag: {
            type: Object,
            value: {},
            notify: true,
            reflectToAttribute: true
          }
        },
  
        ready: function() {
          this.zeiteintrag = this.zeiteintrag || {};
        }
      });
    })();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>[EDIT] - found a solution</strong></p>
  
  <p>After pointing to a Polymer Github Issue about dom-repeat at the Polymer Slack Chat <a href="https://github.com/Polymer/polymer/issues/1713" rel="nofollow">Github Issue</a> and read the <a href="https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat" rel="nofollow">Documentation</a> again. You must use the Polymer methods (push, pop, splice, shift, unshift) for Arrays to trigger an update. </p>
  
  <p>Here is the working solution:</p>
  
  <p><strong>Custom Element: my-uebersicht</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
    (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://&lt;FIREBASE&gt;.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 = [];
        }
      });
    })();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>