0
<template repeat="memberId in members | objKeys">
  <firebase-element data={{member}} location="{{'SOME_LOCATION/' + memberId}}"></firebase-   element>
  <h2>member.name</h2>
</template>

objKeys: function(members) {
  return Object.keys(members);
}

the data looks like this 

members = {
   'memberId_1': true,
   'memberId_2': true,
   'memberId_3': true
}

and at another location store actual users data.

Here, I'm expecting the template repeat to render each user (member1, member2, member3) accordingly. However, it prints out same name for 3 entries as if it re-use the variable "member" for all 3 firebase element in the template repeat, which doesn't really make sense.

I've tried to modified objKeys functions to return 

[ {memberId: memberId_1, member: {}}, 
  {memberId: memberId_2, member: {}},
  {memberId: memberId_3, member: {}]

then use the inner member object for firebase element but the result is still the same

<template repeat="{{item in members | objKeys}}>
  <firebase-element data={{item.member}} location={{'SOME_LOCATION/' + item.memberId}}>    </firebase-element>
</template>

Do I not understand template repeat correct and use it incorrectly here ? Or is it a bug with polymer template.

Hoang Nguyen
  • 39
  • 4
  • Polymer 1.0 version of the question: http://stackoverflow.com/questions/30709167/how-do-you-loop-two-of-polymers-firebase-collection-elements/32056183#32056183 – Salah Saleh Aug 17 '15 at 17:21

1 Answers1

0

I think the problem is that the repeater binds {{member}} to itself.

Check your Firebase - you'll see that the binding not only displays the name name repeatedly in your view, it also set all the values to the same name in your Firebase.

Try this instead, using {{members[memberId}}:

<polymer-element name="member-test">

<template>
<firebase-element data="{{members}}" location="{{'https://YOUR_APP_NAME.firebaseio.com/members/'}}"></firebase-element>
<template repeat="{{memberId in members | objKeys}}">
  <firebase-element data="{{members[memberId]}}" location="{{'https://YOUR_APP_NAME.firebaseio.com/members/' + memberId}}"></firebase-element>
  <h2>{{members[memberId].name}}</h2>
</template>
</template>

<script>
Polymer({

  objKeys: function(members) {
    if(!members) return null;
    return Object.keys(members);
  }

});
</script>

</polymer-element>

This assumes that your Firebase has data in the following format:

{ members:
  { memberID1: { name: "Name1" },
    memberID2: { name: "Name2" }
  }
}
boazgurdin
  • 1