Question

我尝试根据在自定义元素中触发的事件显示属于我的index.html文件的工具栏。我试图按照官方文档中给出的示例：https://www.polymer-project.org/1.0/docs/devguide/events#custom-events

但它不起作用......似乎我的听众永远不会得到这个事件

我的自定义元素：

<dom-module id="page2">
    <template>
     ...
     some HTML code here
     ...
     </template>

     <script>

     Polymer({
        is: 'page2',

        rowClicked: function (e) {
                this.fire('displayMenu');
            }
     });
     </script>

</dom-module>

并在我的索引中：

<page2></page2>

<script>
    document.addEventListener('WebComponentsReady', function () {

    document.querySelector('page2').addEventListener('displayMenu', function () {
        console.log('foo');
    });


});
    </script>
</body>

所以是的，没有任何反应，我从来没有在我的控制台中得到“foo”......

Answer 1

您的JS看起来正确，但元素名称错误。如Polymer docs中所示：

根据规范，自定义元素的名称必须包含短划线（ - ）。

因此，"page2"将无法注册，并出现以下错误（demo）：

“错误：无法在'Document'上执行'registerElement'：类型'page2'的注册失败。类型名称无效。

如果您将元素重命名为包含短划线（例如，“x-page2”），您应该会看到您的示例有效：

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>

<body>
  <x-page2></x-page2>
  <script>
    document.addEventListener('WebComponentsReady', function() {
      document.querySelector('x-page2').addEventListener('displayMenu', function() {
        console.log('foo');
      });
    });
  </script>

  <dom-module id="x-page2">
    <template>
      <button on-click="rowClicked">click me to fire event</button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-page2',
          rowClicked: function() {
            this.fire('displayMenu');
          }
        });
      });
    </script>
  </dom-module>
</body>

^jsbin

索引不会在聚合物中接收阴影根事件

1 个答案: