javascript - Polymer iron-list 迭代，但不打印

Question

我正在尝试在 Polymer 中使用 iron-list 将对象数组显示为列表。在 polymer 功能内部，我有...

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

在模板中，我有...

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

我将“iron-list.html”导入到文件中。

我看到的是 iron-list 创建了 3 个模板(确实如此)，但它没有打印出字符串(标题)。这应该很简单，但我迷路了。任何人都知道为什么它不打印出来？

编辑:我遗漏的一件重要事情是这个元素以 display: none 开始，然后切换为稍后显示。

Answer 1

来自 here , 它说

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 (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. e.g.

所以你需要手动调用

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

列表显示后。

---

此外，即使您没有隐藏/显示列表，您的代码仍然无法工作，因为您过早地将值分配给list。

原因是在 iron-list 中，执行渲染的函数 _render 只会在 this._isVisible 为真。 this._isVisible 基于 iron-list 本身的大小(offsetWidth & offsetHeight)。

因此，尝试在 attached 处理程序中分配值，在需要时稍作延迟 -

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