javascript - ejemplos - queryselector value
El uso de querySelector para encontrar elementos anidados dentro de una plantilla de Polymer devuelve null (2)
Estoy tratando de usar pestañas de papel dentro del elemento nuevo (tabs-list) pero después de las pestañas de impresión no puedo usar querySelector para cambiar una seleccionada.
Código del elemento (sin estilo):
<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>
Código Index.html (sin estilo):
<!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>
Pero
querySelector(''paper-tabs'') = *null*
He intentado colocar el eventListener en index.html pero tengo el mismo problema. ¿Alguien puede decirme dónde está el problema?
¡Muchas gracias!
<template is="dom-repeat" items="{{dataobject}}">
<div on-tap="_showdetail">
<iron-collapse id="collapse">??</iron-collapse>
</div>
</template>
Y para alternar los elementos de colapso de hierro dentro de la repetición de domino que uso
_showdetail: function(e){
Polymer.dom(e.currentTarget).querySelector(''#collapse'').toggle();
},
document.querySelector(''paper-tabs'');
no encuentra el elemento de pestañas de papel , porque está oculto dentro del DOM de sombra del elemento de lista de pestañas .
Simplemente puede asignar una identificación a las pestañas de papel , por ejemplo, pestañas , y acceder a ella de esta manera
this.$.tabs
(Consulte http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding ).
También existe la opción de acceder directamente al DOM de la sombra.
this.shadowRoot.querySelector(''paper-tabs'');
Si solo desea escuchar los cambios en la selección de pestañas de papel , puede usar un observador de cambios:
<paper-tabs selected="{{currentTab}}">
Polymer(''tab-list'', {
currentTab: ''all'',
currentTabChanged: function() {
console.log(this.currentTab);
}
});
(Consulte http://www.polymer-project.org/docs/polymer/polymer.html#change-watchers )