聚合物 1.0 自定义火灾事件未捕获

Question

我无法捕捉到自定义事件，该自定义事件是通过指向 my-overview 元素的按钮从 my-login 元素触发的。我真的不知道为什么这不起作用。

index.html

<iron-pages attr-for-selected="data-route" selected="{{route}}">
  <section data-route="login">
    <paper-material id="pmLogin" elevation="1">
      <paper-toolbar>
        <h1 class="paper-font-display1"><span>Login</span></h1>
      </paper-toolbar>
      <my-login id="elLogin"></my-login>
    </paper-material>
  </section>

  <section data-route="overview">
    <paper-material id="pmOverview" elevation="1">
      <paper-toolbar>
        <h1 class="paper-font-display1"><span>Overview</span></h1>
      </paper-toolbar>
      <my-overview id="elOverview"
                   on-call-overview-refresh="reloadOverview">
      </my-overview>
    </paper-material>
  </section>
</iron-pages>

我的-login.html

routeTo: function(route) {
  var app = document.querySelector('#app');
  app.route = route;
  this.fire('call-overview-refresh');
},

我的-overview.html

reloadOverview: function() {
  ...
}

Answer 1

简而言之，您需要在实际触发自定义事件的元素上声明 on-* 事件处理程序 - 在本例中为 <my-login>。

看到您的 <iron-pages> 在 index.html 中，我想标记被包裹在 <template is="dom-bind"></template> 中？如果是这样，您的 index.html 可能看起来像这样：

<template id="app" is="dom-bind">
  ...
  <iron-pages attr-for-selected="data-route" selected="{{route}}">
    <section data-route="login">
      <paper-material id="pmLogin" elevation="1">
        <paper-toolbar>
          <h1 class="paper-font-display1"><span>Login</span></h1>
        </paper-toolbar>
        <my-login id="elLogin"
                  on-call-overview-refresh="callReloadOverview"></my-login>
      </paper-material>
    </section>

    <section data-route="overview">
      <paper-material id="pmOverview" elevation="1">
        <paper-toolbar>
          <h1 class="paper-font-display1"><span>Overview</span></h1>
        </paper-toolbar>
        <my-overview id="elOverview"></my-overview>
      </paper-material>
    </section>
  </iron-pages>
  ...
</template>

<script>
  window.addEventListener("WebComponentsReady", function (e) {
    var app = document.querySelector("#app");
    app.callReloadOverview = function () {
      app.$.elOverview.reloadOverview();
    }
    ...
  });
</script>

在上面的代码片段中，当 <my-login> 触发 call-overview-refresh 事件时，将调用 callReloadOverview() 函数，该函数将依次调用 <my-overview> 的 reloadOverview()方法。

聚合物 1.0 自定义火灾事件未捕获

Polymer 1.0 custom fire event not catching

polymer-1.0