Verwenden von QuerySelector, um verschachtelte Elemente innerhalb einer Polymer Vorlage zu finden, gibt null zurück

Ich versuche, Papier-Tabs in neuen Element (Tabs-Liste) zu verwenden, aber nach Drucken Tabs kann ich nicht mit QuerySelector ausgewählten zu ändern.Verwenden von QuerySelector, um verschachtelte Elemente innerhalb einer Polymer Vorlage zu finden, gibt null zurück

Code-Element (ohne Stil):

<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 Code (whitout Stil):

<!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>

Aber

querySelector('paper-tabs') = *null*

Ich habe versucht, die eventListener in index.html setzen, aber ich habe das gleiche Problem. kann mir jemand sagen, wo das Problem liegt?

Vielen Dank!

Quelle

2014-07-08 Albert Hornos

document.querySelector('paper-tabs');

findet nicht den Papier-Tabs Element, weil es im Innern des Schattens DOM des Tabula Liste Elements verborgen ist.

Sie können einfach geben Papier-Tabs eine ID, sagen Tabs, und greifen Sie wie so

this.$.tabs

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

Es besteht auch die Möglichkeit, die für den Zugriff auf shadow DOM direkt

this.shadowRoot.querySelector('paper-tabs');

Wenn Sie nur auf Änderungen warten wollen die Papier-Tabs Auswahl, können Sie eine Änderung Beobachter verwenden:

<paper-tabs selected="{{currentTab}}"> 

Polymer('tab-list', { 
    currentTab: 'all', 
    currentTabChanged: function() { 
    console.log(this.currentTab); 
    } 
});

(Siehe http://www.polymer-project.org/docs/polymer/polymer.html#change-watchers)

Quelle

2014-07-08 10:51:55

Ihre Lösung funktioniert für statisch erstellte Knoten, aber nicht für Knoten, die dynamisch innerhalb einer Dom-Wiederholung erstellt werden. Haben Sie eine Idee, wie Sie dynamisch auf Knoten zugreifen können? (Zumindest das Polymer 1.0-Dokument besagt, dass: Hinweis: Dynamisch mithilfe von Datenbindung erstellte Knoten (einschließlich der in Dom-Repeat und Dom-If-Vorlagen) werden nicht hinzugefügt, diese. $ Hash. Der Hash enthält nur statisch erstellte lokale DOM-Knoten (Das heißt, die Knoten in der äußersten Vorlage des Elements definiert.) – yglodt

Weiter in der Dokumentation habe ich gelesen, dass dies. $$ (Selektor) wäre der Weg zu gehen, aber ich kann das nicht zur Arbeit ... – yglodt

Ich denke 'this.shadowRoot' ist jetzt nur' this.root' – Nick

 <template is="dom-repeat" items="{{dataobject}}"> 
     <div on-tap="_showdetail"> 
      <iron-collapse id="collapse">??</iron-collapse> 
     </div> 
     </template>

und das Eisen-collapse Elemente innerhalb des hin- und herzuschalten dom-wiederholen Ich benutze

_showdetail: function(e){ 
    Polymer.dom(e.currentTarget).querySelector('#collapse').toggle(); 
},

Quelle

2016-04-26 09:15:46

Verwenden von QuerySelector, um verschachtelte Elemente innerhalb einer Polymer Vorlage zu finden, gibt null zurück

Antwort

Verwandte Themen