Issues with data binding polymer firebase-element

Question

I'm having a weird issue when biding the result of a firebase-element query from one element to another.

When I use the bindings from firebase-element in the project-list-fb data returns an object rather than an array.

It was pointed out to me in polymer-dev that repeat only works in arrays, not objects (which is what data is returning from firebase-element) How do you convert data to an array or something I can repeat over?

The example of the element where the issue happens is listed below.

<polymer-element name="project-app-fb">
  <template>
    <firebase-element id="base" location="https://project-list.firebaseio.com/" data="{{data}}">
    </firebase-element>
    <style></style>
    <core-drawer-panel id="drawerPanel">
      <core-header-panel drawer class="tall">
        <core-toolbar>
          <h3>Menu</h3>
        </core-toolbar>
        <project-menu on-menuItem="{{menuItem}}" id="pMenu"></project-menu>
      </core-header-panel>

      <core-header-panel main class="tall">
        <core-toolbar>
          <core-icon core-drawer-toggle
                     icon="menu" 
                     alt="Menu for narrow displays">
          </core-icon>
        </core-toolbar>
        <!--
        Custom element holding project list, styles and scripts
        Source: project-list-fb.html
        -->
        <project-list-fb data="{{data}}" on-edit-project=" {{editProject}} "></project-list-fb>
      </core-header-panel>
    </core-drawer-panel>
  </template>

Any help is appreciated

DocDude DocDude · Accepted Answer · 2014-12-18T07:16:01

According to the doc here:

http://polymer.github.io/firebase-element/components/firebase-element/

The data property is an object, but the element also exposes a keys property. If you pass both of these to your custom element, you can iterate over keys and access data[key].

There's a little background in the section "Arrays and Objects" in the API doc.

Issues with data binding polymer firebase-element

1 Answers