How to get the selected value of a polymer element

I know there are quite a few examples when accessing variables in the shadow DOM using javascript, however, after many combinations, I still cannot get the value of the currently selected name in the following example, which is a main menu wrapped in a paper dropdown menu wrapped in a "Paper-menu" button (wrapped in a toolbar).

<paper-menu-button halign="right">
  <paper-icon-button icon="social:person"></paper-icon-button>
     <paper-dropdown class="dropdown" halign="right">
        <core-menu id="userselection" class="menu" selected="1" selectedItem="{{userName}}">
            <template repeat="{{s in users}}">
                <core-item label="{{s.name}}"></core-item>
            </template>
        </core-menu>
     </paper-dropdown>
</paper-menu-button>

      

So, in my javascript, I'm trying to grab the currently selected {{s.name}} value.

My javascript file starts with the following:

var app = document.querySelector('#app');

      

I've tried things like:

this.$.userselection.selected.value, and
app.$.userselection.selected.value, and
this.shadowRoot.querySelector('#userselection').selected.value, and
app.$.userselection.selected.value; and
app.shadowRoot.querySelector('#userselection').selected.value

      

None of them work.

The fourth in the list (for example) throws this error: "Uncaught TypeError: Unable to read property 'userelection' from undefined"

+3


source to share


1 answer


Accessing html elements that are in the shadow area, outside of the resin template, is tricky and definitely more limited than accessing elements without a shadow. Also, there is no need to do this because there are methods to access some of the variables / values ​​that are inside the polymer definition tag template (dom shadow area) from outside, without using dom query methods.

To do this, you need a few things:

  • a function that is defined in a polymer template and is triggered when a list item is selected (e.g. core / document)
  • Polymer fire is a method of communicating with the outside world, as with other polymer templates.
  • and using addEventListener to make the element subscribe to specific events that can be dispatched by any polymeric templates.

index.html



<!DOCTYPE html>
<html>
<head>
    <title>pastries</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="my-pastries.html">
</head>
<body>
    <my-pastries pastries="[{'name':'Croissant'},{'name':'Donut'},{'name':'Pretzel'}]"></my-pastries>
</body>
<script>
    // in index.html full access is granted when accessing dom elements also defined within index.html so querySelector works here
    var patriesTemplate = document.querySelector('my-pastries');
    // 3. patriesTemplate subscribes for it own event pastry-selected occurring within it template definition
    patriesTemplate.addEventListener('pastry-selected', function(e) {
        // e.detail holds the pastry that is passed to fire method
        console.log(e.detail.name);// Donut
    });
</script>
</html>

      

Polymer template (my-pastries.html):

<link rel="import" href="bower_components/polymer/polymer.html">
<link href="bower_components/paper-button/paper-button.html" rel="import">
<link href="bower_components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="bower_components/paper-icon-button/paper-icon-button.html" rel="import">
<link href="bower_components/paper-item/paper-item.html" rel="import">
<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
<polymer-element name="my-pastries" attributes="pastries">
    <template>
        <paper-menu-button label="Colored">
        <paper-icon-button icon="menu" class="colored"></paper-icon-button>
        <paper-dropdown class="dropdown colored">
          <core-menu class="menu">
            <template repeat="{{pastry in pastries}}">
              <paper-item on-click="{{setSelectedValue}}">{{pastry.name}}</paper-item>
            </template>
          </core-menu>
        </paper-dropdown>
      </paper-menu-button>
    </template>
    <script>
      Polymer({
        pastries: [],
        // 1. function to trigger fire method
        setSelectedValue : function(e,detail,sender){
          // get templateInstance' context to have access to the model(pastry)
          var pastry = e.target.templateInstance.model.pastry;
          // 2. fire dispatches pastry-selected event that the element patriesTemplate has subscribed for in index.html
          this.fire('pastry-selected',pastry);
        }
      });
    </script>
</polymer-element>

      

Hope it helps.

0


source







All Articles