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

Question

我正在尝试调用动态自定义元素的方法。仅当在自定义元素的 html 文件的 script 标记内进行调用时，它才有效。但是，当在另一个自定义元素的脚本标记或 index.html 的脚本标记中进行调用时，我收到错误:“方法名称”不是控制台中的函数。感谢您的答复。对于上下文，这是一个片段

        // 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 中)，则表示它不可用(通常缺少导入)。