gpt4 book ai didi

javascript - 使用 querySelector 查找 Polymer 模板内的嵌套元素返回 null

转载 作者:行者123 更新时间:2023-12-03 03:45:18 25 4
gpt4 key购买 nike

我尝试在新元素(选项卡列表)中使用纸张选项卡,但在打印选项卡后我无法使用 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 代码(无样式):

<!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 中,但我遇到了同样的问题。谁能告诉我问题出在哪里?

非常感谢!

最佳答案

document.querySelector('paper-tabs');

找不到 paper-tabs 元素,因为它隐藏在 tab-list 元素的影子 DOM 内。

您可以简单地为paper-tabs提供一个ID,例如tabs,然后像这样访问它

this.$.tabs

(参见http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding。)

还有直接访问影子 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 )

关于javascript - 使用 querySelector 查找 Polymer 模板内的嵌套元素返回 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24627076/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com