javascript - Polymer:如何将动态值加载到纸质菜单中的纸质项目中？

Question

我想从 javascript 代码加载我从 firebase 获得的对象列表，到纸质菜单中纸质项目的“items”属性。这是我的代码:

HTML:

<paper-menu class="menuList" id="disciList" attrForSelected="value" selectedItems="{{selectionDisci}}" multi>
  <template is="dom-repeat" items="{{disciplines}}">
     <paper-item value="{{item.name}}">{{item.name}}</paper-item>
  </template>
</paper-menu>

Javascript:

var disciplines = [];
      var i = 0;
      
      var disciRef = db.ref(exercises.node + exercises.discinames);
      disciRef.once("value").then(function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
          var key = childSnapshot.key;
          disciplines["name" + i] = childSnapshot.key;
          i++;
        });
      });

我得到了正确的列表，但我不知道如何加载 {{items.name}} 加上 paper-item 中的“i”值(0-1-2-3 ...)。如果有其他加载动态列表的方法，我愿意学习。

谢谢。

Answer 1

使用属性绑定(bind)到数组。然后将列表设置为该数组属性。

Polymer({
  is: 'custom-element',
  properties: {
    disciplines:
      type: Array,
      value: []
  }

  loadItem: function(){
    //finish loading items to var disciplines then
    this.set('disciplines', disciplines);    
  }
})

您可以在 dom-repeat 中使用 index 来打印“i”的值

<paper-item value="{{item.name}}">{{index}} {{item.name}}</paper-item>

另请阅读 dom-repeat 的文档 here .