通过属性更改的双向数据绑定不适用于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屋！