Polymer's iron-list won't show -
i'm playing google's polymer library , have trouble iron-list component. not rendered , no error thrown.
here 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 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]] – [[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>
problem not in consumed json (because it's working in other test written) , can not figure problem is. code above results blank page header rendered.
it looks forgot import iron-list
, throw in:
<link rel="import" href="bower_components/iron-list/iron-list.html">
Comments
Post a Comment