Question

我试图调用动态自定义元素的方法。它仅在调用自定义元素的html文件的脚本标记内时才有效。但是当在另一个自定义元素的脚本标记或index.html的脚本标记中进行调用时，我会收到错误：＆＃39; method-name＆＃39;不是控制台中的功能。感谢您的答复。对于上下文，这是一个片段

        // in my custom element html file
         ....

        <script type="text/javascript">

           Polymer( {
             is: "my-new-view",

             toggleContent: function() {
                 this.$.collapse.toggle();
              },

           insertContent: function (userContent) {
           console.log("inserting userContent...");

           }

         });
         </script> 
       </dom-module>
    </html>


    Now  in another file my-app.html
    ...
   <link rel="import" href="my-new-view.html">
   ...
   <dom-module is="my-app">
       ...
      <script>
      ...
        // i want to test my-new-view. insertContent() here.
        var dynamicView = document.createElement('my-new-view');
         // in the following line i get the error insertContent is
         // not a function       
         dynamicView.insertContent();      
       </script>
  </dom-module>

请帮助。我究竟做错了什么。我在我的index.html中尝试了最后两行javascript，但是我得到了同样的错误。谢谢。

Answer 1

我认为，当元素尚未注册时，您可能过早地调用该方法。

在index.html中，您可以将代码包装在WebComponentsReady事件

的处理程序中

window.addEventListener('WebComponentsReady', function(e) {
  document.createElement('my-new-view').insertContent();
});

在其他Polymer元素中，您可以将代码移到my-app元素内，而不是直接在脚本中移动。

另外，要检查自定义元素是否可用，请查看document.createElement('my-new-view').constructor。如果它显示function HTMLElement() { [native code] }（在Chrome中），则表示它不可用（通常缺少导入）。

Polymer：从另一个脚本调用动态自定义元素的方法

1 个答案: