How do you nest two of Polymer's firebase-collection elements inside dom-repeat?

Question

I have a problem of looping two of Polymers firebase-collection elements. With my database structure i first have to check which events the user has access to, then get the information on that event from events.

The problem with this code is that when i loop the second firebase-collection the data-binding on "events" will be the same on all that repeats and therefore it will be the same name on every h4.

So is there a way of having a unique variable in data="{{ }}". or is there a better way of writing out the data?

<firebase-collection data="{{userData}}" location="{{_getCorrectUrl()}}"></firebase-collection> 
<template is="dom-repeat" items="{{userData}}" as="user">
  <firebase-collection data="{{events}}" location="{{_getCorrectEventsUrl(user.__firebaseKey__)}}" ></firebase-collection> 
  <template is="dom-repeat" items="{{events}}" as="event">
    <h4>{{event.value.name}}</h4>
  </template>
</template>

Could you not load the user with the events so you don't have to do the second `firebase-collection` and could just repeat over `{{userData.events}}`? — Ben Thomas, Jun 08 '15 at 14:11
That will solve the problem but it will make it slower. I'm following firebases recommendations https://www.firebase.com/docs/web/guide/structuring-data.html — Anton Furuholm, Jun 08 '15 at 14:15
Think I'm reading the documentation that you can't use permissions as a filter. — marcus7777, Aug 17 '15 at 06:18

Salah Saleh · Answer 1 · 2017-02-16T10:01:29.460

I have a solution which I consider not the best way to solve this issue, but it works for me. I created another element called 'my-user, I exposed an attribute called user which is assigned the value of user from the first dom-repeat. Everything works, however, I am not satisfied with this solution. I am still looking for a solution which doesn't involve creating a dedicated element for that.

<firebase-collection data="{{userData}}" location="{{_getCorrectUrl()}}">
</firebase-collection> 
<template is="dom-repeat" items="{{userData}}" as="user">
  <my-user user="[[user]]"></my-user>
</template>

and the other 'my-user':

<dom-module id="my-user">
<template>
  <firebase-collection data="{{events}}" location="{{_getCorrectEventsUrl(user)}}" ></firebase-collection> 
  <template is="dom-repeat" items="{{events}}" as="event">
    <h4>{{event.value.name}}</h4>
  </template>
</template>
<script>
    (function () {
  Polymer({
    is: 'my-user',
    _getCorrectEventsUrl: function(obj) {
      return 'https://app.firebaseio.com/users/' + obj.__firebaseKey__;
    },
    properties: {
      user:{
        type:Object,
      },
    },

  });
})();
</script>
</dom-module>

EDIT

Now after sometime of answering this question I came to realize that when someone face such a situation with NoSQL database, it usually highlights a problem in the design. Data should be de-normalized and one should avoid joining like what is normally done in SQL databases. Watch the The Firebase Database For SQL Developers on youtube.

Did you get any better solution than this? or still using the same solution of having another custom element. — Srikanth, Jan 22 '16 at 04:18
@Srikanth yes, watch this: https://www.youtube.com/watch?v=ZDjiUmx51y8&index=3&list=PLNYkxOF6rcICdISJclfQhj2S8QZGjXV8J you basically need to redesign your application. — Salah Saleh, Jan 22 '16 at 21:38

How do you nest two of Polymer's firebase-collection elements inside dom-repeat?

1 Answers1

Linked