無法讀取聚合物2.0中eventlistner的屬性

Question

當組件準備好在dom中時，webcomponent-loader.js無法分派事件。 document.dispatchEvent（new CustomEvent（'WebComponentsReady'，{bubbles：true}））; 我正在嘗試創建wysiwyg-e組件，並且它在dom準備就緒時不會讓組件加載。由於addEventListner，它停止服務整個聚合物應用程序。

錯誤::遺漏的類型錯誤：無法讀取屬性「的addEventListener」空的

<dom-module id="custom-keybar"> 
    <template> 
    <wysiwyg-e style="width: 100vw; height: 100vh;" id="wysiwygE"> 
     <wysiwyg-tool-bold></wysiwyg-tool-bold> 
     <wysiwyg-tool-italic></wysiwyg-tool-italic> 
     <wysiwyg-tool-underline></wysiwyg-tool-underline> 
     <wysiwyg-tool-strike></wysiwyg-tool-strike> 
     <wysiwyg-tool-color></wysiwyg-tool-color> 
     <wysiwyg-tool-clear></wysiwyg-tool-clear> 
     <wysiwyg-tool-code></wysiwyg-tool-code> 
     <wysiwyg-tool-link></wysiwyg-tool-link> 
     <wysiwyg-tool-image></wysiwyg-tool-image> 
     <wysiwyg-tool-audio></wysiwyg-tool-audio> 
     <wysiwyg-tool-video></wysiwyg-tool-video> 
     <wysiwyg-tool-ordered></wysiwyg-tool-ordered> 
     <wysiwyg-tool-unordered></wysiwyg-tool-unordered> 
     <wysiwyg-tool-indent></wysiwyg-tool-indent> 
     <wysiwyg-tool-outdent></wysiwyg-tool-outdent> 
     <wysiwyg-tool-justify right center full></wysiwyg-tool-justify> 
     <wysiwyg-tool-heading h1 h2 h3 h4 h5 h6></wysiwyg-tool-heading> 
     <wysiwyg-tool-blockquote></wysiwyg-tool-blockquote> 
    </wysiwyg-e> 
    <iron-ajax url="../README.md" handle-as="text" id="ajax"></iron-ajax> 
    </template> 

    <script> 
    window.addEventListener(
      'WebComponentsReady', 
       function() { 
       var ironAjax = document.querySelector('iron-ajax'), wysiwygE 
     = document.querySelector('wysiwyg-e'); 

       ironAjax.addEventListener(
        'response', 
        function() { 
         var value = marked(this.lastResponse); 
         wysiwygE.value = value.replace(new 
     RegExp('https://miztroh.github.io/bower_components/wysiwyg-e/', 
       'g'), '../'); 
        } 
       ); 

       ironAjax.generateRequest(); 
      // }; 
     //); 
     </script> 
     </dom-module> 

Answer 1

你能嘗試更多的聚合物，並且重寫你的<iron-ajax>和<script>標籤？例如

<iron-ajax url="../README.md" handle-as="text" 
    auto on-response="handleResponse"></iron-ajax> 

<script> 
    class KeyBar extends Polymer.Element { 
     handleResponse(event, request) { 
      var value = marked(event.detail.response); 
      // ... 
     } 
    } 
    customElements.define('custom-keybar', KeyBar); 
</script>