Support iron-list

[LouisCAD]

Hi, after completing the Firebase+Polymer codelab, I wanted to replace the dom-repeat property with the <iron-list/> element so I can get optimal performance even on really long lists. It unfortunately didn't work as the data supplied by the <firebase-query/> element misses the index key in the model (see the iron-list doc). It also misses the selected key I can we'd want to use it for batch actions such as archive, or delete. Is Polymerfire going to be pluggable to iron-list, and is there any workaround in the meantime?

[mbleigh]

It should be compatible without modification -- firebase-query binds to just a normal Polymer array...

[LouisCAD]

So why was the dom empty inside the iron-list, while it was populated with dom-repeat? Could you show me a snippet for a working iron-list version of the Firebase Polymer codelab please?

[andrewspy]

I was having related issue on another app. I was using <firebase-query> with <iron-list>, and notice whenever data is deleted in firebase, <iron-list> does not remove the item correctly (on display). Adding data into firebase seems to work fine with <iron-list> though.

[andrewspy]

Just an update on my case, after inspecting the element on the deleted list, I noticed the final item inside the list did have an hidden attribute.

Setting the following CSS style inside the custom element did resolve my issue.

<style>
  .class[hidden] {
    display: none;
  }
</style>

[LouisCAD]

@andrewspy Can you share a snippet/gist on how you made <iron-list/> work with <firebase-query/> please? I couldn't get it to display any single item while it showed data when using dom-repeat.

[NeoLegends]

I found a workaround: fetch your results in a separate component and use Polymers linking functionality with a "temporary" property to make iron-list work.

<firebase-query data="{{_results}}" ...></firebase-query>

// Further down

Polymer({
    properties: {
        _results: {
            type: Array,
            notify: true
        },
        results: {
            type: Array,
            notify: true
        },

        ready: function () {
            this.set('tracks', this._results);
            this.linkPaths('tracks', '_results');
        }
    }
});

Then later use the component in your view and bind iron-list to the results-property. Works for us.

[jkhoffman]

On 2.0-preview, I'm getting this error:

Uncaught TypeError: Cannot set property '__key__' of null
    at HTMLElement.<anonymous> (iron-list.html:1219)
    at HTMLElement._iterateItems (iron-list.html:1184)
    at HTMLElement._assignModels (iron-list.html:1214)
    at HTMLElement._update (iron-list.html:931)
    at HTMLElement._increasePoolIfNeeded (iron-list.html:995)
    at HTMLElement._render (iron-list.html:1035)
    at _timer._asyncModule.run (debounce.html:40)

I didn't do anything fancy, just a simple firebase-query bound to a property like it shows in polymerfire docs. Then, I bound the iron-list to the same property and got the error above.

[chwzr]

It simply does not work at mine.. Why we cannot use it just that simple as with dom-repeat?

    <firebase-query log
      path="/posts"
      data="{{posts}}" >
    </firebase-query>

        <iron-list id="list" items="[[posts]]" as="item">
          <template>    
              <div> [[item.name]]</div>
          </template>
        </iron-list>

I do not want to stamp 572309284234 trillion items in my dom-repeat.. even the chunking mode of dom-repeat is not good for performance. I really want to use Firebase because its awesome. Why does firebase-query not respond in the exact same format as a iron-ajax pointent to a .json file?

[ggirard07]

I am NOT using firebase-query (just a simple iron-ajax), and it is not working either. I am getting a TypeError: Cannot set property '__key__' of null in _assignModels: function(itemSet) on line 1227...