如何将属性更改事件附加到 Polymers dom-bind？

Question

我正在尝试使 Polymer 的双向数据绑定与自动绑定 dom-bind 中的本机自定义元素一起工作。我按照文档说：

将 Polymer 元素与其他元素或框架一起使用时，您 可以手动将 on-property-changed 侦听器附加到元素 收到财产变动通知，并根据情况采取必要的行动 关于新值。所以我创建了一个元素，并将绑定绑定到它：

我尝试将事件触发直接附加到元素：Two-way data binding through property-changed does not work for 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 上的实时示例

所以看来事件根本没有触发。

Answer 1

在触发属性更改之前，您没有给 Polymer 足够的时间来加载，这就是 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>