如何將propery改變的事件附加到聚合物的dom綁定？

Question

我正在嘗試使用自動綁定dom綁定中的自定義元素使Polymer的雙向數據綁定工作。我按照它說的文檔：

使用具有其他元素或框架的Polymer元素，你 可以手動將一個on-屬性更改監聽到元件以 通知的屬性發生變化，並採取基於新價值的基於 的必要操作。所以，我創建了一個元素，和連接綁定到它：

我嘗試連接到事件的直接觸發的元素：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

在觸發屬性更改之前，您沒有給聚合物足夠的時間加載，這就是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>