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

Polymer 1.x dom-repeat does not work properly

本文关键字:工作 常工作 dom-repeat 不能 聚合物      更新时间:2023-09-26

我试图在Polymer 1中使用dom-repeat helper。x显示文章列表。

连接到Firebase后,数据正确存储在我的lbrief -array中。

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

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

您直接使用lbriefe数组,但是为了通知关于数组突变的聚合物绑定,您应该使用特殊的API

在你的例子中只需使用push方法将元素添加到数组

this.push("lbriefe", item)