Yur*_*ikh 5 javascript shadow-dom polymer
我有一个简单的聚合物元素,如下所示:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="selector-course">
<template>
<style>
paper-dropdown-menu {
padding:5px;
}
</style>
<paper-dropdown-menu label="Course">
<paper-listbox class="dropdown-content" selected="{{selected}}" attr-for-selected="value" id="courseSelect">
<paper-item value="main">Main</paper-item>
<paper-item value="soup">Soup</paper-item>
<paper-item value="dessert">Dessert</paper-item>
<paper-item value="appetizer">Appetizer</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
Polymer({
is: 'selector-course'
});
</script>
</dom-module>
此元素存储在单独的HTML文件中,然后在我的其他几个元素中使用,如下所示:
<link rel="import" href="components/selector-course.html">
...
<selector-course selected="{{recipe.course}}"></selector-course>
现在,在我的父元素中,我需要访问所选的值 <selector-course>
现在,我有一个看起来像这样的解决方案:
this.shadowRoot.querySelector('selector-course').shadowRoot.querySelector('#courseSelect').selectedItem.getAttribute("value");
但是,对于访问元素属性这样一个简单的任务,这个查询看起来非常复杂.
有没有更简单的方法来实现同样的事情？
哦不,这是一个非常糟糕的主意.访问内部元素非常脆弱,因为它要求父元素具有关于实现细节的深入(双关语)知识<selector-course>.更不用说你的方法不适用于Shady DOM.
在您的情况下,您只需向元素添加通知属性即可
Polymer({
is: 'selector-course',
properties: {
selected: {
notify: true
}
}
});
要在数据绑定之外选择它的值,您可以使用@ a1626提到的方法
var selected = this.$('selector-course').selected;
Polymer({
is: 'selector-course',
properties: {
selected: {
notify: true
}
}
});<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-dropdown-menu/paper-dropdown-menu.html" rel="import"/>
<link href="paper-listbox/paper-listbox.html" rel="import"/>
<link href="paper-item/paper-item.html" rel="import"/>
</head>
<body>
<template is="dom-bind">
<selector-course selected="{{selection}}"></selector-course>
<div>{{selection}}</div>
</template>
<dom-module id="selector-course">
<template>
<style>
paper-dropdown-menu {
padding:5px;
}
</style>
<paper-dropdown-menu label="Course">
<paper-listbox class="dropdown-content" selected="{{selected}}" attr-for-selected="value" id="courseSelect">
<paper-item value="main">Main</paper-item>
<paper-item value="soup">Soup</paper-item>
<paper-item value="dessert">Dessert</paper-item>
<paper-item value="appetizer">Appetizer</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
</body>
</html>由于您使用了绑定，因此您的父元素本身似乎是一个 Polymer 元素。在这种情况下，您可以使用访问属性
this.$.<id of child>.<property name>
或者，如果您的元素在内部dom-if或dom-repeat
this.$$(<querySelector>).<property name>
你可以在这里查看
在你的情况下，它会
<selector-course selected="{{selected}}" id="mySelector"></selector-course>
在 JavaScript 中
this.$.selected
| 归档时间： |
|
| 查看次数： |
5247 次 |
| 最近记录： |