如何将属性改变的事件附加到聚合物的dom-bind上

How to attach propery-changed event to Polymer's dom-bind?

本文关键字：聚合物 dom-bind 事件 属性 改变      更新时间：2023-09-26

我试图使聚合物的双向数据绑定工作与我的本地自定义元素在自动绑定dom-bind。我遵循文档中说的:

当将一个Polymer元素与其他元素或框架一起使用时，您可以使用它是否可以手动将属性更改后的侦听器附加到元素上收到属性更改的通知，并采取必要的措施关于新值。所以我创建了一个元素，并给它附加了绑定:

我尝试将事件直接附加到元素上:通过property-changed进行的双向数据绑定对dom-bind不起作用但是它不起作用，所以现在，我尝试将侦听器添加到dom-bind本身，这似乎也被打破了:

  <template is="dom-bind" id="t">
    Let's try to listen to changes to <span>{{myobj}}</span> or <span>{{myobj.smth}}</span>
  </template>
    <script>
      var domBind = document.querySelector('#t');
      domBind.myobj = {smth: "myobj.smth"}
      // Another attempt to make Polymer binding work..
      domBind.addEventListener('myobj-changed', function() {
        alert("yey! myobj-changed works!")
      });
      // trigger changes in Polymer way
      domBind.set("myobj",{smth:"myobj.smthNew"});
      domBind.set("myobj.smth","myobj.smthComplatelyNew");
    </script>

实例:http://jsbin.com/qubuku/edit?html,output

所以事件似乎根本没有被触发。

在触发属性更改之前，您没有给聚合物足够的时间来加载，这就是dom-change事件的目的。试试这个:

<template is="dom-bind" id="t">
  Let's try to listen to changes to <span>{{myobj}}</span> or <span>{{myobj.smth}}</span>
</template>
<script>
  var domBind = document.querySelector('#t');
  domBind.myobj = {smth: "myobj.smth"};
  domBind.addEventListener('myobj-changed', function() {
    alert("yey! myobj-changed works!")
  });
  document.addEventListener('dom-change', function() {
    domBind.set("myobj",{smth:"myobj.smthNew"}); // This won't trigger the event
    domBind.set("myobj.smth","myobj.smthComplatelyNew"); // This will trigger it
  });
</script>
相关文章：