Question

我正在使用google-sigin中的Polymer catalog元素。我想听取聚合物元素之外的signedIn属性的更改。该属性设置为notify: true，并且在与{更改通知相关的Polymer documentation中，它表示：

将Polymer元素与其他元素或框架一起使用时，可以手动将on-property-changed侦听器附加到要通知属性更改的元素，并根据新值执行必要的操作。

我曾尝试收听on-signIn-changed，on-sign-in-changed，on-property-changed，signIn-changed和sign-in-changed，但这些事件都没有被触发。

侦听事件的代码如下：

document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('google-signin').addEventListener('on-signIn-changed', function() {
        // never gets called
    });
});

我知道我可能正在收听google-signin-success事件（其工作顺便说一句，我可以看到signedIn已更改为true），但我想了解为什么事件没有被触发/我做错了什么。

干杯！

Answer 1

我注意到该属性被称为signedIn而不是signIn。你试过addEventListener('signed-in-changed'吗？

Answer 2

通常，要通知外部脚本Polymer元素属性更改：

确保notify在属性定义中设置为true。
从外部脚本中，在元素上附加一个事件侦听器。事件名称应为property-name-changed，其中property-name 是属性名称的破折号版本（this.firstName触发 first-name-changed）。
假设事件监听器的参数名称为e，请访问 e.detail.value的新属性值。

示例：

<body>
  <!-- assume x-el changes its number property somehow -->
  <x-el number="1></x-el>
  <script>
    (function(document) {
      var el = document.querySelector('x-el');
      el.addEventListener('number-changed', function(e) {
        console.log('the new value is ' + e.detail.value);
      });
    })(document);
  </script>
</body>

我现在正在向文档添加一个部分，它将记录在 - ＆gt; https://www.polymer-project.org/1.0/docs/devguide/properties.html#notify-external

这里有一个用于修补的jsbin - ＆gt; http://jsbin.com/risevu/edit?html,output

聚合物元素不会触发＆＃34; on- <property> -changed＆＃34;财产变更时的事件

2 个答案: