[英]Using querySelector to find nested elements inside a Polymer template returns null
我正在嘗試在新元素(tabs-list)中使用paper-tabs但是在打印選項卡之后我不能使用querySelector來更改所選的。
元素代碼(沒有樣式):
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../sprint-service/sprint-service.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
<polymer-element name="tab-list" attributes="show">
<template>
<sprint-service id="service" sprints="{{sprints}}"></sprint-service>
<paper-tabs selected="all" valueattr="name" self-end>
<paper-tab name="all">ALL</paper-tab>
<template repeat="{{sprint in sprints}}">
<paper-tab name="{{sprint.id}}">{{sprint.id}}</paper-tab>
</template>
</paper-tabs>
</template>
<script>
Polymer('tab-list', {
ready: function() {
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
list.show = tabs.selected;
})
}
});
</script>
</polymer-element>
Index.html代碼(whitout樣式):
<!doctype html>
<html>
<head>
<title>unquote</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform-dev/platform.js"></script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="tab-list.html">
<link rel="import" href="post-list.html">
</head>
<body unresolved touch-action="auto">
<core-header-panel>
<core-toolbar>
<tab-list></tab-list>
</core-toolbar>
<div class="container" layout vertical center>
<post-list show="all"></post-list>
</div>
</core-header-panel>
<script>
var list = document.querySelector('post-list');
</script>
</body>
</html>
但
querySelector('paper-tabs') = *null*
我試圖將eventListener
放在index.html中,但我eventListener
了同樣的問題。 誰能告訴我問題在哪里?
非常感謝你!
document.querySelector('paper-tabs');
找不到paper-tabs元素,因為它隱藏在tab-list元素的shadow DOM中。
你可以簡單地給紙質標簽提供一個id,比如標簽 ,然后像這樣訪問它
this.$.tabs
(參見http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding 。)
還可以選擇直接訪問shadow DOM
this.shadowRoot.querySelector('paper-tabs');
如果您只想在紙張選項卡選項上監聽更改,則可以使用更改監視器:
<paper-tabs selected="{{currentTab}}">
Polymer('tab-list', {
currentTab: 'all',
currentTabChanged: function() {
console.log(this.currentTab);
}
});
(見http://www.polymer-project.org/docs/polymer/polymer.html#change-watchers )
<template is="dom-repeat" items="{{dataobject}}">
<div on-tap="_showdetail">
<iron-collapse id="collapse">??</iron-collapse>
</div>
</template>
並且在我使用的dom-repeat中切換鐵塌陷元素
_showdetail: function(e){
Polymer.dom(e.currentTarget).querySelector('#collapse').toggle();
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.