Polymer iron-list 迭代，但不打印

Question

我正在尝试在 Polymer 中使用 iron-list 将 object 的数组显示为列表。在聚合物函数中，我有 ...

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

我很确定你没有为你的 iron-list 元素声明明确的大小。

来自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 (e.g. the flex or fit classes).

Answer 2

来自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');

列表显示后。

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

原因是在 iron-list 内部，执行渲染的函数 _render 只会在 this._isVisible 为 true 时执行此工作。 this._isVisible 基于 iron-list 本身的大小（offsetWidth 和 offsetHeight）。

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

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

Polymer iron-list 迭代，但不打印

Polymer iron-list iterates, but not printing

javascript

arrays

components

polymer

polymer-1.0