पॉलिमर ड्रॉपडाउन सूची समस्या

Question

मुझे पॉलिमर 0.5 के साथ सरल ड्रॉपडाउन सूची को लागू करने में बड़ी कठिनाई हो रही है।

मैं पॉलिमर से 5 से 1.0 तक समानांतर माइग्रेट कर रहा हूं। लेकिन यह अलग चर्चा है ( Migrating Polymer project .5 to 1.0 error)।

<polymer-element name="x-trigger" extends="paper-icon-button" relative="" on-tap="{{toggle}}" noink=""> 
<template> 
    <shadow></shadow> 
    <content></content> 
</template> 
</polymer-element> 

मैं तत्व का उपयोग कर रहा आगे इस तरह शरीर के नीचे: में स्क्रिप्ट खंड निम्नलिखित

<x-trigger icon="menu" relative="" noink="" role="button" tabindex="0" aria-label="menu"> 
    <paper-dropdown tabindex="-1" class="core-transition" style="outline: none; display: none;"> 
     halign = left 
     <br> 
     valign = top 
    </paper-dropdown> 
</x-trigger> 

मैं परिभाषित

यहाँ कोड मैं शरीर के अंदर बहुलक तत्व को निर्धारित करने का उपयोग कर रहा है पृष्ठ का मुख्य भाग:

<script> 
    Polymer('x-trigger', { 
     toggle: function() { 
      if (!this.dropdown) { 
       this.dropdown = this.querySelector('paper-dropdown'); 
      } 
      this.dropdown && this.dropdown.toggle(); 
     } 
    }); 
</script> 

समस्या यह है कि, मैं आइकन बट देखता हूं पेज पर लेकिन जब भी मैं उस बटन पर क्लिक करता हूं, कुछ भी नहीं होता है।

इसके अलावा डिबगिंग पता चला,

1. अगर मैं क्रोम में सांत्वना डीबगर और
2. पॉलिमर पर या स्क्रिप्ट खंड में टॉगल विधि के अंदर जगह को तोड़ने बिंदु खोलने
3. पेज
4. तोड़ बिंदु को ताज़ा करें हिट और ड्रॉप-डाउन काम करता है

मुझे नहीं पता कि समस्या

अद्यतन: डिबगिंग जबकि मैं लाइन में निम्न त्रुटि मिला: Polymer('x-trigger', {

/गहरी/Combinator बहिष्कृत है

इसका मतलब यह है मैं बहुलक v1 पर अपग्रेड करना है कि इस मुद्दे को हल करने के लिए या पॉलिमर 0.5 के लिए उनके किसी भी कामकाज है?

Answer 1

पॉलिमर 0.5 और 1.0 के बीच का अंतर वास्तव में काफी बड़ा है। आपके द्वारा संदर्भित/गहरे/चयनकर्ता को उन बड़े मुद्दों में से एक था जिन्हें मैं माइग्रेट करना था।

मैंने हाल ही में एक परियोजना को 0.5 से 1.0 तक माइग्रेट किया है और ऐसा करने के लिए मुझे नए नोटेशन के सभी उदाहरण/गहराई को बदलना पड़ा।

मेरी सलाह पहले 0.5 से 1.0 तक माइग्रेट करना होगा, फिर समाधान के साथ आने के लिए नए पॉलिमर दस्तावेज़ का उपयोग करना होगा।

उस प्रोजेक्ट में मैंने एक साधारण ड्रॉप-डाउन लागू किया।

<dom-module id="profile-edit-page"> 
    <style> 
    // Styling 
    </style> 
    <template> 
    <div class="container-app"> 
     <div class="container-inner"> 

     <!-- Other form elements --> 

     <input is="iron-input" id="filterInput" type="text" required placeholder="Automotive assistant" label="Occupation" bind-value="{{order.occupation}}" on-focus="startPickingOccupation" on-keydown="updateFilter" on-blur="stopPickingOccupation" class="block field input-reg mb2"></input> 

     <div class$="[[pickingOccupationClass(pickingOccupation)]]"> 
      <paper-menu > 
      <template id="occupationRepeat" is="dom-repeat" items="[[occupations]]" filter="isShown"> 
       <paper-item class="option" on-click="pickOccupation">[[item]]</paper-item> 
      </template> 
      </paper-menu> 
     </div> 

     <button class$="inputClass" class="btn btn-primary btn-block" on-click="forward" value="{{order.registration}}">Continue</button> 
     </div> 
    </div> 

    </template> 
</dom-module> 

<script> 
    Polymer({ 
    properties: { 
     order: Object, 
     pickingOccupation: { 
     type: Boolean, 
     value: false 
     }, 
     occupationFilter: { 
     type: String, 
     value: "" 
     }, 
     occupations: { 
     type: Array, 
     value: ["Abattoir Worker", 
     "Accommodation Officer", 
     "Accountant", 
     // Etc. 
     "Zoology Consultant"] 
     } 
    }, 
    is: "profile-edit-page", 

    pickOccupation: function(e) { 
     this.set('order.occupation', e.model.item); 
     this.set('pickingOccupation', false); 
    }, 

    startPickingOccupation: function() { 
     this.pickingOccupation = true; 
    }, 

    stopPickingOccupation: function() { 
     this.async(function() { 
     this.pickingOccupation = false; 
     },500); 
    }, 

    updateFilter: function() { 
     if(typeof(this.$.occupationRepeat) === "undefined") { 
     return; 
     } 
     this.set('occupationFilter', this.$.filterInput.value.toLowerCase()); 
     this.async(function() { 
     this.$.occupationRepeat.render(); 
     },50); 
    }, 

    isShown: function(item) { 
     if(this.order.occupation == '') { 
     return false; 
     } 
     return (item.toLowerCase().search(this.occupationFilter) !== -1); 
    }, 
    pickingOccupationClass: function(picking) { 
     if(this.pickingOccupation) { 
     return "picking"; 
     } else { 
     return "hidden"; 
     } 
    } 
    }); 
</script> 

Answer 2

वास्तविक polymer-element में script ले जाएँ:

<polymer-element name="x-trigger" extends="paper-icon-button" relative="" on-tap="{{toggle}}" noink=""> 
    <template> 
     <shadow></shadow> 
     <content></content> 
    </template> 
    <script> 
     Polymer('x-trigger', { 
      toggle: function() { 
       if (!this.dropdown) { 
        this.dropdown = this. querySelector('paper-dropdown'); 
       } 
       this.dropdown && this.dropdown.toggle(); 
      } 
     }); 
    </script> 
</polymer-element>