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

Question

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

当将Polymer元素与其他元素或框架一起使用时，可以将属性更改后的侦听器手动附加到要通知属性更改的元素，并根据新值采取必要的操作。 所以我创建了一个元素，并附加了绑定到它：

我尝试将事件的触发器直接附加到元素： 通过属性更改进行双向数据绑定不适用于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上的实时示例，输出

因此，似乎该事件根本没有触发。

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>