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

703 views Asked by At

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>
1

There are 1 answers

2
Salah Saleh On

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.