CODEWITHSUNDEEP
data-bindingdrop-down-menupolymerweb-componentpaper-elements
Todd
Todd

Reputation: 5454

Binding polymer paper-dropdown-menu to localstorage

Admittedly silly-seeming question... And...

before anyone hastily replies, "RTFM," I have yet I still don't quite grok it -- data-binding.

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}}")

Here's some js... this works fine; i'm trying to do things the "dogmatic" Polymer way.

    /*\  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!

Upvotes: 0

Views: 1197

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56084

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>

Upvotes: 2

Related Questions