Polymer 的 iron-list 不会显示

Question

我正在使用 Google 的 Polymer 库，但我在使用 iron-list 组件时遇到了问题。它只是没有被渲染，也没有抛出任何错误。

这是我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="odTimeTracker - UI test with Polymer">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
    <title>odTimeTracker</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/font-roboto/roboto.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-styles/classes/typography.html">
    <link rel="import" href="bower_components/iron-image/iron-image.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
    <link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
    <template is="dom-bind" id="app">
        <iron-ajax auto url="activities-json.php" handle-as="json"
                   last-response="{{data}}"></iron-ajax>
        <paper-scroll-header-panel class="fit" condenses keep-condensed-header>
            <paper-toolbar class="tall">
                <paper-icon-button icon="arrow-back"></paper-icon-button>
                <div class="flex"></div>
                <paper-icon-button icon="search"></paper-icon-button>
                <paper-icon-button icon="more-vert"></paper-icon-button>
                <div class="bottom title">odTimeTracker</div>
            </paper-toolbar>
            <iron-list items="[[data.items]]" as="item">
                <template>
                    <div>
                        <div class="item">
                            <b><code>[[item.ActivityId]]</code></b>
                            <div class="pad">
                                <div class="primary">[[item.Name]]</div>
                                <div class="secondary">[[item.Started]] &ndash; [[item.Stopped]]</div>
                                <div class="secondary dim">[[item.Description]]</div>
                            </div>
                            <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
                        </div>
                    </div>
                </template>
            </iron-list>
        </paper-scroll-header-panel>
    </template>
    <script>
document.querySelector('template[is=dom-bind]').iconForItem = function(item) {
    return item ? (item.Stopped == '' ? 'star-border' : 'star') : '';
};

document.addEventListener('paper-header-transform', function(event) {
    var title = this.querySelector('.title');
    var detail = event.detail;
    var deltaHeight = detail.height - detail.condensedHeight;
    var scale = Math.max(0.6, (deltaHeight - detail.y) / (deltaHeight / 0.4)  + 0.6);

    Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
});
    </script>
</body>
</html>

问题不在消耗中JSON（因为它在我编写的其他测试中有效）而且我无法弄清楚问题是什么。上面的代码导致呈现 header 的空白页面。

Answer 1

您似乎忘记导入 iron-list，将其放入：

<link rel="import" href="bower_components/iron-list/iron-list.html">

Polymer 的 iron-list 不会显示

Polymer's iron-list won't show

polymer

polymer-1.0