聚合物元素不会触发“on <property> changed”;属性更改时的事件

Polymer element doesn't trigger the "on-<property>-changed" event when property changes

本文关键字：属性 changed 事件 聚合物 元素 on property      更新时间：2023-09-26

我正在使用来自聚合物目录的google- sign元素。我想听听聚合物元素之外的signedIn属性的变化。该属性设置为notify: true，并且在与更改通知相关的Polymer文档中，它说:

当将一个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)，但我想了解为什么事件没有被触发/我做错了什么。

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

一般来说，通知一个外部脚本到一个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>

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

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

相关文章：