पॉलिमर टेम्पलेट के अंदर नेस्टेड तत्वों को खोजने के लिए querySelector का उपयोग शून्य

मैं नए तत्व (टैब-सूची) के अंदर पेपर-टैब का उपयोग करने की कोशिश कर रहा हूं लेकिन प्रिंट टैब के बाद मैं चयनित चयन करने के लिए querySelector का उपयोग नहीं कर सकता।पॉलिमर टेम्पलेट के अंदर नेस्टेड तत्वों को खोजने के लिए 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*

मैंने index.html में डालने का प्रयास किया है, लेकिन मुझे एक ही समस्या है। क्या कोई मुझे बता सकता है कि समस्या कहां है?

बहुत बहुत धन्यवाद!

स्रोत

2014-07-08 Albert Hornos

document.querySelector('paper-tabs');

नहीं है क्योंकि यह टैब-सूची तत्व की छाया डोम के अंदर छिपा हुआ है, तत्व कागज-टैब मिल रहा है।

आप बस कागज-टैब एक आईडी दे सकते हैं, टैब कहते हैं, और इस तरह का उपयोग यह इतना

this.$.tabs

(http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding देखें।)

भी उपयोग करने का विकल्प भी नहीं है छाया डोम सीधे

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

यदि आप केवल परिवर्तनों को सुनना चाहते हैं

<paper-tabs selected="{{currentTab}}"> Polymer('tab-list', { currentTab: 'all', currentTabChanged: function() { console.log(this.currentTab); } });

स्रोत

2014-07-08 10:51:55

आपका समाधान स्थैतिक रूप से बनाए गए नोड्स के लिए काम करता है, लेकिन डोम-दोहराना के अंदर गतिशील रूप से बनाए गए नोड्स के लिए नहीं। किसी भी विचार को गतिशील रूप से बनाए गए नोड्स तक कैसे पहुंचे? (कम से कम पॉलिमर 1.0 डॉक्टर बताता है कि: नोट: डेटा बाइंडिंग (डोम-दोहराने और डोम-टेम्पलेट्स में शामिल) सहित गतिशील रूप से बनाए गए नोड्स इस में नहीं जोड़े गए हैं। $ हैश। हैश में केवल स्थिर रूप से बनाए गए स्थानीय डोम नोड्स शामिल हैं (यानी, तत्व के बाहरीतम टेम्पलेट में परिभाषित नोड्स)।) – yglodt

प्रलेखन में आगे मैंने यह पढ़ा है। $$ (चयनकर्ता) जाने का रास्ता होगा, लेकिन मैं इसे काम करने के लिए नहीं मिल सकता ... – yglodt

मुझे लगता है कि 'this.shadowRoot' अब सिर्फ' this.root' है – Nick

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

और अंदर लोहे के पतन तत्वों टॉगल करने के लिए डोम-दोहराने मैं

का उपयोग करें ( http://www.polymer-project.org/docs/polymer/polymer.html#change-watchers देखें): कागज-टैब चयन, आप एक परिवर्तन द्रष्टा उपयोग कर सकते हैं

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

स्रोत

2016-04-26 09:15:46

पॉलिमर टेम्पलेट के अंदर नेस्टेड तत्वों को खोजने के लिए querySelector का उपयोग शून्य

उत्तर

संबंधित मुद्दे