Skip to content

Instantly share code, notes, and snippets.

@jsphkhan

jsphkhan/polymer-iron-list-dynamic-add.html

Created August 18, 2015 13:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsphkhan/4a4a1cc1c83614a5d81c to your computer and use it in GitHub Desktop.
Save jsphkhan/4a4a1cc1c83614a5d81c to your computer and use it in GitHub Desktop.
Download ZIP
Polymer 1.0 example that shows how to add items to iron-list dynamically using Array mutation techniques
Raw
polymer-iron-list-dynamic-add.html
<!doctype html>
<html>
<head>
<title>iron-list dynamic list item</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.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="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-list/iron-list.html">
<style is="custom-style">
paper-scroll-header-panel {
/*@apply(--layout-fit);*/
top:100px;
@apply(--layout-vertical);
@apply(--paper-font-common-base);
}
paper-toolbar.tall .title {
font-size: 40px;
margin-left: 60px;
-webkit-transform-origin: left center;
transform-origin: left center;
overflow: visible;
}
iron-list {
background-color: var(--paper-grey-200, #eee);
padding-bottom: 16px;
}
.item {
@apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 20px;
box-sizing: border-box;
background-color: #DDD;
}
.pad {
padding: 0 16px;
@apply(--layout-flex);
@apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.secondary {
font-size: 14px;
}
.dim {
color: gray;
}
</style>
</head>
<body unresolved>
<button id="addBtn">Add New Item to List</button>
<template is="dom-bind">
<!-- <iron-ajax url="bower_components/iron-list/demo/data/contacts.json" last-response="{{data}}" auto></iron-ajax> -->
<iron-list items="[[data]]" as="item" id="my-list">
<template>
<div>
<div class="item">
<!-- <img class="avatar" src="[[item.image]]"> -->
<div class="pad">
<div class="primary">[[item.date]]</div>
<div class="secondary">[[item.amount]]</div>
<!-- <div class="secondary dim">[[item.longText]]</div> -->
</div>
<!-- <iron-icon icon$="[[iconForItem(item)]]"></iron-icon> -->
</div>
</div>
</template>
</iron-list>
</template>
<script type="text/javascript">
var data = [
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'},
{date: '15-08-15', amount: '200'}
];
var addBtn = document.querySelector("#addBtn"),
autoBindTemplate = document.querySelector('template[is=dom-bind]');
//initial set of data to list
autoBindTemplate.data = data;
addBtn.addEventListener("click", function() {
//add more data to list
autoBindTemplate.unshift('data', {date: '16-08-15', amount: '20'}, {date: '17-08-15', amount: '180'});
//autoBindTemplate.unshift('data', {date: '17-08-15', amount: '180'});
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment