通过属性更改的双向数据绑定不适用于dom-bind [英] Two-way data binding through property-changed does not work for dom-bind
问题描述
我试图使Polymer的双向数据绑定与自动绑定 dom-bind 中的本机自定义元素配合使用。
我遵循文档说:
当使用聚合物元素与其他元素或框架时,您可以手动附加属性更改的监听器一个要通知财产变更的元素,并根据新的值采取必要的措施。
所以我创建了一个元素,并附加绑定:
< my-element notify ={{text}}>< / my - 元素>
然后,为了遵循通知协议,我将侦听器附加到 property-changed
事件,我尝试通过 addEventListener
,属性更改
属性附加它们,无
属性已更改,但我没有收到通知,无法使用。
直播示例: http://jsbin.com/dijequ/edit?html,output
我在 dom-bind
元素中使用它,我不能使用 $ = / code>因为我需要直接的属性绑定,因为在我的真实情况下,我需要绑定到共享数据对象。
文档中的错误,还是我做错了?如何获取有关财产变更的通知?
我发现的唯一解决方案是定义简单的JS setter。 p>
因此,通过忽略Polymer的协议,我们可以获得框架无关的功能:
MyElementPrototype.createdCallback = function(event){
var notify = null;
Object.defineProperty(this,notify,{
set:function(newValue){
notify = newValue;
console.log('setter was notifications');
},
get:function(){
return notify;
}
});
};
工作示例: http://jsbin.com/bezuya/edit?html,output
I'm trying to make Polymer's two-way data binding work with my native custom elements within auto-binding dom-bind
.
I follow the docs which says:
When using a Polymer element with other elements or frameworks, you can manually attach an on-property-changed listener to an element to be notified of property changes, and take the necessary actions based on the new value.
So I created an element, and attached binding to it:
<my-element notify="{{text}}"></my-element>
Then, to follow notification protocol, I attached listeners to property-changed
event, I have tried attaching them via addEventListener
, on-property-changed
attribute, none of those worked.
Property gets changed, but I get no notification, and cannot use it.
Live example: http://jsbin.com/dijequ/edit?html,output
I'm using it within dom-bind
element, and I cannot use $=
as I need direct property binding, as in my real case I need to bind to a shared data object.
Is it a bug in Polymer, a bug in docs, or am I doing something wrong? How can I get notified about property changes?
The only solution I have found is to define just plain JS setter.
So by disregarding Polymer's protocol, we can get framework agnostic functionality:
MyElementPrototype.createdCallback = function(event){
var notify= null;
Object.defineProperty(this, "notify",{
set: function(newValue){
notify = newValue;
console.log('setter was notified');
},
get: function(){
return notify;
}
});
};
Working example: http://jsbin.com/bezuya/edit?html,output
这篇关于通过属性更改的双向数据绑定不适用于dom-bind的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!