我知道有很多关于通过 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
这些都不起作用。
列表中的第四个(例如)导致此错误:“Uncaught TypeError: Cannot read property 'userselection' of undefined”
最佳答案
访问位于 polymer 模板外的 shadow dom 区域内的 html 元素是棘手的，而且肯定比访问非 shadow dom 元素更受限制。此外，没有必要这样做，因为有一些技术可以在不使用 dom 查询方法的情况下从外部访问 polymer 定义(影子 dom 区域)的 template 标记内的某些变量/值。
你需要几件事情来完成:
- 在 polymer 模板中定义并在选择列表项时触发的函数。(例如 core/paper-item)
- polymer fire与其他 polymer 模板一样与外界交流的方法。
- 并使用 addEventListener 使元素订阅某些可以由任何 polymer 模板分派(dispatch)的事件。
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>
polymer 模板(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>
希望这对您有所帮助。
关于javascript - 如何访问 Polymer 元素的选定值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30151564/