如何访问 Polymer 元素的选定值

Question

我知道有很多关于通过 javascript 访问影子 DOM 中的变量的示例，但是，在尝试了很多组合之后，我似乎仍然无法获得值以下示例中当前选择的名称的名称，它是包裹在纸张下拉菜单中的核心菜单，包裹在纸质菜单按钮中（包裹在核心工具栏中）。

<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>

所以基本上，在我的 javascript 中，我试图获取当前选择的 {{s.name}} 值。

我的 javascript 文件开头如下：

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

我试过类似的东西：

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 其中有效。

列表中的第四个（例如）导致此错误："Uncaught TypeError: Cannot read property 'userselection' of undefined"

Answer 1

访问位于聚合物模板外阴影 dom 区域内的 html 元素是棘手的，而且肯定比访问非阴影 dom 元素更受限制。此外，没有必要这样做，因为有一些技术可以从外部访问聚合物定义（阴影 dom 区域）的模板标签内的某些 variables/values不使用 dom 查询方法。

你需要几件事情来完成：

在聚合物模板中定义并在选择列表项时触发的函数。（例如core/paper-item）
Polymer fire 像其他 Polymer 模板一样与外界交流的方法。
并使用 addEventListener 使元素订阅某些可以由任何聚合物模板分派的事件。

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's own event pastry-selected occurring within it's 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>

聚合物模板(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>

希望对您有所帮助。

如何访问 Polymer 元素的选定值

How to access Polymer element's selected value

html

javascript

polymer