2017-07-14 33 views
1

当组件准备好在dom中时,webcomponent-loader.js无法分派事件。 document.dispatchEvent(new CustomEvent('WebComponentsReady',{bubbles:true})); 我正在尝试创建wysiwyg-e组件,并且它在dom准备就绪时不会让组件加载。由于addEventListner,它停止服务整个聚合物应用程序。无法读取聚合物2.0中eventlistner的属性

错误::遗漏的类型错误:无法读取属性“的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> 

回答

0

你能尝试更多的聚合物,并且重写你的<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>