Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 587
Anton Furuholm Avatar asked Oct 31 '22 02:10

Anton Furuholm


1 Answers

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.

like image 136
Salah Saleh Avatar answered Nov 09 '22 10:11

Salah Saleh