Javascript 如何将属性更改事件附加到聚合物&x27；什么是dom bind？

我正在尝试使Polymer的双向数据绑定与自动绑定dom绑定中的本机自定义元素一起工作。我遵循以下文件：

当将聚合物元件与其他元件或框架一起使用时，您可以 可以手动将已更改属性的侦听器附加到 通知属性更改，并根据需要采取必要的措施 关于新的价值观。因此，我创建了一个元素，并将绑定附加到该元素：

我尝试将直接触发的事件附加到元素： 但是它不起作用，所以现在，我尝试将侦听器添加到

dombind

本身，它似乎也被破坏了：

  <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>

让我们听听对{{myobj}或{{myobj.smth}的更改
var domBind=document.querySelector（'#t'）；
domBind.myobj={smth:“myobj.smth”}
//使聚合物结合工作的另一次尝试。。
addEventListener（'myobj-changed'，function（）{
警报（“耶！myobj改变了作品！”）
});
//引发聚合物方式的变化
domBind.set（“myobj”，{smth:“myobj.smthNew”}）；
domBind.set（“myobj.smth”、“myobj.smthcompletelynew”）；

现场示范

---

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

在触发属性更改之前，您没有给Polymer足够的时间加载，这就是

dom更改

事件的目的。试试这个：

<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>

让我们听听对{{myobj}或{{myobj.smth}的更改
var domBind=document.querySelector（'#t'）；
domBind.myobj={smth:“myobj.smth”}；
addEventListener（'myobj-changed'，function（）{
警报（“耶！myobj改变了作品！”）
});
document.addEventListener（'dom-change'，function（））{
domBind.set（“myobj”，{smth:“myobj.smthNew”}）；//这不会触发事件
domBind.set（“myobj.smth”、“myobj.smthcompletelynew”）；//这将触发它
});

在触发属性更改之前，您没有给Polymer足够的时间加载，这就是

dom更改事件的目的。试试这个：

<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>


让我们听听对{{myobj}或{{myobj.smth}的更改
var domBind=document.querySelector（'#t'）；
domBind.myobj={smth:“myobj.smth”}；
addEventListener（'myobj-changed'，function（）{
警报（“耶！myobj改变了作品！”）
});
document.addEventListener（'dom-change'，function（））{
domBind.set（“myobj”，{smth:“myobj.smthNew”}）；//这不会触发事件
domBind.set（“myobj.smth”、“myobj.smthcompletelynew”）；//这将触发它
});
文档中的这一部分解释了这个答案-文档中的这一部分解释了这个答案-