Constructing dynamic lists of lists with Polymer - polymer

Question

I am trying to use Polymer and am struggling to figure out how to create my system in a Polymer-y way.
I'd like a left nav bar (a column on the left side), as shown in the example app docs. For the purposes of the explanation, the left nav bar shows a list of people and the main content window shows a list of books they own. When a person is selected, the main content window should be updated to show only that person's books.
Both lists should be dynamically populated via a network query and be able to be re-populated via a refresh button. It seems like this might complicate how I bind data, as the functions can't just live in a the shadowdom, as the nav bar and content lists need to be able to communicate.
From the day I've spent looking into Polymer, the nav bar (list of people) seems a natural candidate for <iron-selector>. The list of books sounds like <iron-list>. I'll need to have several instances of the book list, however--one for each person.
Should I create a <book-list> custom element for this, perhaps with <iron-list> in the template? Is it straightforward to create these <book-list> elements in response to selections made in <iron-selector>, as I won't know how to create them before querying for book owners? Any pointers on how to do this?
This sounds like a very basic use case, but I still don't know enough about Polymer to have any intuitions about the best way to do it. Any help would be much appreciated.

Answer 1

I eventually got this working. As a starting point, I leaned heavily on the example given in the docs that uses the app-drawer-template.
As suggested by a commenter above, using a router ended up being part of the answer. What was confusing me was that I wan't sure how to dynamically update both the <iron-selector> used in that example as well as the <iron-pages>. I wanted both to represent the same list of users. How would I keep these in sync, etc?
I ended up with three custom elements. Two were thin wrappers around <iron-selector> and <iron-pages>. The third was a <user-provider> element. The role of <user-provider> is to perform the request for the list of users and expose the result as a variable that the other two elements can interact with.
<user-provider> has only a refresh button. It has a property called users of type Array. In the ready() lifecycle callback and in response to clicking the refresh button, it updates the list of users. Note that reflectToAttribute and notify are both set to true, ensuring that it can indeed provide the list to the other elements. A stripped down version is shown below:
<dom-module id="user-provider">
<template>
<style>
:host {
display: block;
box-sizing: border-box;
</style>
<paper-fab icon="refresh" on-tap="refresh"></paper-fab>
</template>
<script>
Polymer({
is: 'user-provider',
properties: {
users: {
type: Array,
notify: true,
reflectToAttribute: true
}
},
refresh: function() {
this.refreshUsers();
},
refreshUsers: function() {
var _this = this;
// in reality I require a browserify module here
window.getUsersViaPromise()
.then(retrievedUsers => {
_this.users = retrievedUsers;
});
},
// Element Lifecycle
ready: function() {
this.users = [];
this.refreshUsers();
}
});
</script>
</dom-module>
My <user-selector> element takes an array as an argument. The thing that was stumping me here was that I didn't realize how simple it was to use a dom-repeat template inside of an <iron-selector>. I thought I'd have to wrap the repeats in a <div> or something, at which point the <iron-selector> would stop working. With dom-repeat I'm able to even use my special settings element and keep it always at the bottom of the list. The incoming variable corresponds to the element that is selected.
<dom-module id="user-selector">
<template>
<style>
:host {
display: block;
--app-primary-color: #4285f4;
--app-secondary-color: black;
}
</style>
<iron-selector
selected="{{incoming}}"
attr-for-selected="name"
class="drawer-list"
role="navigation">
<template is="dom-repeat" items="{{users}}">
<a name="view{{index}}">{{item.instanceName}}</a>
</template>
<a name="settings">Settings</a>
</iron-selector>
</template>
<script>
Polymer({
is: 'user-selector',
properties: {
incoming: {
type: String,
reflectToAttribute: true,
notify: true
},
users: {
type: Array,
reflectToAttribute: true
},
}
});
</script>
</dom-module>
<user-pages> is a thin wrapper around <iron-pages>. It works together with <user-selector> to update the content displayed in the main portion of the app.
<dom-module id="user-pages">
<template>
<style>
:host {
display: block;
box-sizing: border-box;
}
</style>
<iron-pages role="main" selected="{{incoming}}" attr-for-selected="name">
<template is="dom-repeat" items="{{users}}">
<user-summary
name="view{{index}}"
username="{{item.userName}}">
</user-summary>
</template>
<settings-view name="settings"></settings-view>
</iron-pages>
</template>
<script>
Polymer({
is: 'user-pages',
properties: {
users: Array,
incoming: {
type: String,
reflectToAttribute: true,
notify: true
},
}
});
</script>
</dom-module>
And, finally, my <my-app> element plumbs it all together.
<dom-module id="my-app">
<template>
<style>
:host {
display: block;
--app-primary-color: #4285f4;
--app-secondary-color: black;
}
app-header {
background-color: var(--app-primary-color);
color: #fff;
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
line-height: 40px;
text-decoration: none;
color: var(--app-secondary-color);
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
.drawer-list a.subroute {
padding-left: 32px;
}
</style>
<app-route
route="{{page}}"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>My App</app-toolbar>
<start-app-button></start-app-button>
<user-provider users="{{retrievedUsers}}"></user-provider>
<user-selector incoming="{{page}}" users="{{retrievedUsers}}">
</user-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div title>My App</div>
</app-toolbar>
</app-header>
<user-pages
incoming="{{page}}"
users="{{retrievedUsers}}">
</user-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true
},
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
}
});
</script>
</dom-module>
Note in particular the way that <user-provider> is responsible for obtaining the list of users and exposing it just via a variable, allowing the other two elements to make obtain the data via basic databinding. That, along with the dom-repeat elements as immediate children of <iron-selector> and <iron-pages>, allowed this to be pretty straight forward once I started thinking of it in the Polymer way.