1. घर
  2. सवाल और जवाब
  3. पॉलिमर में टैब के साथ स्विच स्विच 1.0

पॉलिमर में टैब के साथ स्विच स्विच 1.0

2015-05-30 10 views
6

मैं एक निश्चित टैब पर क्लिक करते समय पॉलीमर में दृश्य को बदलना चाहता हूं। इसके लिए मैंने paper-tabs documentation में वर्णित पेपर-टैब और लोहे के पृष्ठों का उपयोग करने का विचार किया।पॉलिमर में टैब के साथ स्विच स्विच 1.0

<html> 
 

 
<head> 
 
    <title>Test</title> 
 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
 
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> 
 
    <link rel="import" href="bower_components/iron-pages/iron-pages.html"> 
 
</head> 
 

 
<body> 
 

 
    <paper-tabs selected="{{selected}}"> 
 
    <paper-tab>Tab 1</paper-tab> 
 
    <paper-tab>Tab 2</paper-tab> 
 
    <paper-tab>Tab 3</paper-tab> 
 
    </paper-tabs> 
 

 
    {{selected}} 
 

 
    <iron-pages selected="{{selected}}"> 
 
    <div>Page 1</div> 
 
    <div>Page 2</div> 
 
    <div>Page 3</div> 
 
    </iron-pages> 
 
    
 
</body> 
 
</html>

बदलने टैब्स काम करने के लिए लगता है:

यह HTML मैं यह एहसास करना है। लेकिन ऐसा लगता है कि चयनित चर सही ढंग से सेट नहीं हो रहा है क्योंकि लौह-पेज तत्व दृश्य को नहीं बदलता है। मैं पॉलिमर 1.0 में आवश्यक डेटा-बाध्यकारी कैसे प्राप्त कर सकता हूं? क्या मुझे दो तत्वों के चारों ओर एक कस्टम कंटेनर एलिमेंट बनाने की आवश्यकता है ताकि उन्हें एक ऐसा दायरा दिया जा सके जहां दोनों इस तरह के चर का उपयोग कर सकें?

स्रोत

2015-05-30 b-m-f

उत्तर

9

यदि आप घुंघराले ब्रैकेट काम करना चाहते हैं तो आपको template[is="dom-bind"] तत्व में तत्वों को एम्बेड करना होगा।

<template is="dom-bind" id="scope"> 
    <span>{{number}}</span> 
</template> 
... 
<script> 
    window.addEventListener('WebComponentsReady', function() { //You have to make sure that all custom elements are loaded 
    var scope = document.querySelector("template#scope"); 
    scope.number = 1; // display the number 1 
    }); 
</script>

स्रोत

2015-05-31 11:43:49

+0

बहुत बहुत धन्यवाद। मैंने पाया बहुलक दस्तावेज पढ़ना "है = 'ऑटो बाध्यकारी' '। यह 0.5 से है। क्या यह 1.0 में "is = 'dom-bind' जैसा ही है? –

+1

यह वही है। –

-1

मैं भी इस समस्या में भाग गया।

https://github.com/PolymerElements/iron-pages/issues/3

इस कोशिश: एक फिक्स कि मेरे लिए यहां काम किया पाया

वर पी = document.querySelector ('लौह पृष्ठों'); पी ._removeListener (पी .activateEvent);

स्रोत

2015-06-01 22:22:05 devDesign

+0

यह एक आंतरिक एपीआई विधि का उपयोग कर सिर्फ गंदे है। –

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

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