Polymer iron-list iterates, but not printing

Question

I'm trying to use an iron-list in Polymer to display an array of object as a list. Inside the polymer function, I have ...

ready: function() {
    this.list = [{title: 'Thing 1'}, {title: 'Thing 2'}, {title: 'Thing 3'}];
}

and in the template, I have ...

<iron-list items="[[ list ]]" as="l">
    <template>
        <div class="row">
            <div class="" on-tap="">
                <span>[[ l.title ]]</span>
                <paper-checkbox class="right"></paper-checkbox>
            </div>
        </div>
    </template>
</iron-list>

I imported "iron-list.html" into the file.

What I'm seeing, is that the iron-list creates 3 templates (rightly so), but it doesn't print out the strings (the titles). This should've been simple but I'm lost here. Anyone has any idea why it doesn't print out?

EDIT: One important thing I left out is that this element started out with display: none and then toggled to show later on.

Answer 1

From here , it says

iron-list lays out the items when it recives a notification via the resize event. This event is fired by any element that implements IronResizableBehavior.

By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (eg you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. eg

So you will need to manually call

document.querySelector('iron-list').fire('resize');

after the list is shown.

---

Also, even if you didn't hide/show the list, your code still wouldn't work 'cause you assigned the value to the list a bit too early.

The reason is that inside iron-list , the function that does the rendering _render will only do the job when this._isVisible is true . And this._isVisible is based on the sizing ( offsetWidth & offsetHeight ) of the iron-list itself.

So instead, try assigning the value inside the attached handler, with a little delay when needed -

attached: function () {
    this.async(function () {
        this.list = [{ title: 'Thing 1' }, { title: 'Thing 2' }, { title: 'Thing 3' }];
    }, 100);
}

Answer 2

I'm pretty sure you did not declare an explicit size for your iron-list element.

From the docs :

Important : iron-list must ether be explicitly sized, or delegate scrolling to an explicitly sized parent. By "explicitly sized", we mean it either has an explicit CSS height property set via a class or inline style, or else is sized by other layout means (eg the flex or fit classes).