聚合物1.x dom-repeat不能正常工作

时间:2016-08-31 15:54:56

标签: javascript polymer

我正在尝试使用 Polymer 1.x 中的dom-repeat帮助程序来显示文章列表。

连接到Firebase后,数据会正确存储在我的 lbriefe 阵列中。

但是,dom-repeat-template无法将 lbriefe 中对象的属性传递给我的自定义元素 leserbriefe

这是我的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>

这是我的剧本:

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);
        });
  }
});

1 个答案:

答案 0 :(得分:1)

您直接使用lbriefe数组,但是为了通知Polymer绑定数组突变,您应该使用special API

因此,在您的情况下,只需使用push方法将项添加到数组

this.push("lbriefe", item)