CODEWITHSUNDEEP
javascripthtmlpolymer
Isaac Alvarez Gil
Isaac Alvarez Gil

Reputation: 31

Polymer: How can I load dynamic values into a paper-item within a paper-menu?

I would like to get from javascript code load a list of objects I get from firebase, to the "items" property of a paper-item within a paper-menu. Here's my code:

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

I get the list correctly, but I can not figure out how to load {{items.name}} plus the value of "i" (0-1-2-3 ...) in the paper-item. If there is another way to load the dynamic list, I am open to learning.

Thank you.

Upvotes: 2

Views: 210

Answers (1)

Taufiq Ahmed
Taufiq Ahmed

Reputation: 747

Use a property to bind to the array. Then set the list to that array property.

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

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

you can use index inside a dom-repeat to print the value of 'i'

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

also read the doc for dom-repeat here.

Upvotes: 1

Related Questions