javascript - polymer 铁列表迭代，但不打印

Question

我正在尝试使用 Polymer 中的铁列表将对象数组显示为列表。在 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: function () {
    this.async(function () {
        this.list = [{ title: 'Thing 1' }, { title: 'Thing 2' }, { title: 'Thing 3' }];
    }, 100);
}