Polymer 1.x dom-repeat does not work properly

Question

I am trying to use the dom-repeat helper in Polymer 1.x to display a list of articles.

After connecting to Firebase the data is correctly stored in my lbriefe-array.

However the dom-repeat-template fails to pass the properties of my objects in lbriefe to my custom element leserbriefe.

This is my dom-repeat-template:

<template is="dom-repeat" items="[[lbriefe]]" initial-count="3">
  <lb-leserbrief
  heading$="[[item.heading]]" 
  author$="[[item.author]]" 
  reference$="[[item.reference]]" 
  content$="[[item.content]]" 
  source$="[[item.source]]"
  date$="[[item.date]]"
  >
  </lb-leserbrief>
</template>

And here is my script:

Polymer({
  is: 'lb-leserbriefe',
  properties: {
    lbriefe: {
          type: Array,
          value: function() {return [];},
          notify: true
      }
  },

  ready: function(){
    const leserbriefRef = firebase.database().ref('leserbriefe');
    const divList = this.$.lbbriefe;
        leserbriefRef.on('value', snap => {
            this.lbriefe = [
              {
                heading: "Test",
                author: "Daniel",
                reference: "Kein",
                content: "<p>Test Test</p>",
                source: "Ich",date: "31. August 2016"
              }
              ];
            for(var i=0; i<13; i++){
                this.lbriefe[i] = snap.child('l'+i).val();
            }
            console.log(this.lbriefe);
        });
  }
});

Vlad Minaev Vlad Minaev · Accepted Answer · 2016-09-01T09:22:39

You work with lbriefe array directly, however in order to notify Polymer binding about array mutations you should use special API

So in your case just use push method to add items to array

this.push("lbriefe", item)

Polymer 1.x dom-repeat does not work properly

1 Answers