Użycie querySelector do znalezienia zagnieżdżonych elementów wewnątrz szablonu polimerowego zwraca wartość null

Próbuję użyć kartek papieru w nowym elemencie (lista-kart), ale po kartach drukowania nie mogę użyć querySelector do zmiany wybranego.Użycie querySelector do znalezienia zagnieżdżonych elementów wewnątrz szablonu polimerowego zwraca wartość null

kod element (bez stylu):

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

kod Index.html (whitout style):

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

Ale

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

Próbowałem umieścić eventListener w index.html, ale mam ten sam problem. Czy ktoś może mi powiedzieć, gdzie jest problem?

Dziękuję bardzo!

Źródło

2014-07-08 Albert Hornos

document.querySelector('paper-tabs');

nie znajdzie papier zaczepy elementu, ponieważ jest ukryty wewnątrz DOM cieniu tab-lista elementu.

można po prostu dać papier zaczepy identyfikator, powiedzieć wypustki, a dostęp to jak tak

this.$.tabs

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

Istnieje również możliwość dostępu do shadow DOM bezpośrednio

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

Jeśli chcesz tylko posłuchać zmian papier-tabs wybór, można użyć obserwatora Zmiana

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

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

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

Źródło

2014-07-08 10:51:55

Twoje rozwiązanie działa dla węzłów utworzonych statycznie, ale nie dla węzłów utworzonych dynamicznie wewnątrz powtórzenia dom. Masz pomysł, jak dynamicznie uzyskać dostęp do węzłów? (Przynajmniej dokument Polymer 1.0 stwierdza, że: Uwaga: Węzły utworzone dynamicznie przy użyciu powiązania danych (w tym te w szablonach dom-repeat i dom-if) nie są dodawane do tego. $ Hash. Hash zawiera tylko statycznie utworzone lokalne węzły DOM (czyli węzły zdefiniowane w najbardziej zewnętrznym szablonie elementu).) – yglodt

W dalszej części dokumentacji przeczytałem, że to. $$ (selektor) byłoby drogą do zrobienia, ale nie mogę tego zmusić do pracy ... – yglodt

Myślę, że 'this.shadowRoot' jest teraz po prostu' this.root' – Nick

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

A, aby przełączyć elementy żelazo-collapse wewnątrz dom-powtórzyć używam

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

Źródło

2016-04-26 09:15:46

Użycie querySelector do znalezienia zagnieżdżonych elementów wewnątrz szablonu polimerowego zwraca wartość null

Odpowiedz

Powiązane problemy