So, I've got a sort of form, which is really a component consisting of inputs and whatnot and also a core-localstorage element. I've successfully persisted the values of other inputs between sessions, yet I've gotten fuzzy on the paper-dropdown-menu. gridlocked...
What I want to do is use the label for the display value, and when the machine in machines bit is going, I want the selected paper-item to reflect the value from local storage (the label)
Oh, and this is in jade, btw. Here's how it's looking:
//- JADE
/** Stuff that works: **/
core-localstorage(id='storage', name='vbms-user-settings', value='{{settings}}')
.subhead General
paper-input(floatingLabel, label='Username', inputValue='{{settings.username}}', on-change='{{updateStorage}}')
paper-input(floatingLabel, label='Password', inputValue='{{settings.password}}', on-change='{{updateStorage}}', type='password')
paper-checkbox#vpn_gui_toggle.accent(label='Run Headless', checked, style='margin-right: 16px;')
/** The confusing input **/
paper-dropdown-menu#vm_dropdown(valueattr='label', on-core-select='{{updateDefaultVM}}')
template(repeat="{{machine in machines}}")
paper-item(label="{{machine.name}}")
/*\ JS
|*| ...blah blah polymer jank...
\*/
objectToStorage: function(obj) {
this.$.storage.value=obj;
this.$.storage.save();
},
updateStorage: function() {
this.objectToStorage(this.settings);
},
updateDefaultVM: function() {}
Can anyone lead me to the most-probably simple solution to this hangup?!
Thanks in advance!
I believe that the recommended way of using <paper-dropdown-menu> is to have a two layers of containers between it and the <paper-item>s, based on the example from the current docs.
If you're using that setup, you've now got a <core-menu>, which inherits from <core-selector>. Things that inherit from <core-selector> can make use of the selected attribute to control which item is selected. But <core-selected> defaults to checking to see if any of the items it contains has a name attribute whose value matches the selected value, so we also need to add in name attributes to all of the <paper-item>s.
The end result of something simple, that doesn't rely on loading in values from <core-localstorage>, looks like the following. You should be able to do something similar if you're loading in the initial value from <core-localstorage> instead of hardcoding it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html">
<template id="page-template" is="auto-binding">
<h1>Pastry Menu</h1>
<paper-dropdown-menu label="Your favorite pastry">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{initiallySelected}}">
<template repeat="{{pastry in pastries}}">
<paper-item name="{{pastry}}">{{pastry}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
var pageTemplate = document.querySelector('#page-template');
pageTemplate.pastries = [
'Croissant',
'Donut',
'Financier',
'Madeleine'
];
// Set this to whatever you want the initially selected item to be. It's value can be loaded from localStorage.
pageTemplate.initiallySelected = 'Financier';
</script>
</body>
</html>