Two-way data binding through property-changed does not work for dom-bind

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/32402304/two-way-data-binding-through-property-changed-does-not-work-for-dom-bind

标签

javascript

data-binding

polymer