通过属性更改的双向数据绑定不适用于dom-bind

时间:2015-09-04 16:07:01

标签: javascript data-binding polymer

我正在尝试使Polymer的双向数据绑定与自动绑定<div class="CustomStylesCont" style="overflow:scroll;position:relative;width:50%;height:30%;"> <h6>Navbar</h6> <form id="upload" method="post" class="form-horizontal"action="***" enctype="multipart/form-data"> <fieldset> <div class="colorPicker" > <input type="radio" name="hat-color" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red"/> <label for="hat-color-red" class="red">red</label> <input type="radio" name="hat-color" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange"/> <label for="hat-color-orange" class="orange">orange</label> <input type="radio" name="hat-color" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow"/> <label for="hat-color-yellow" class="yellow">yellow</label> <input type="radio" name="hat-color" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green"/> <label for="hat-color-green" class="green">green</label> <input type="radio" name="hat-color" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue"/> <label for="hat-color-blue" class="blue">blue</label> <input type="radio" name="hat-color" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo"/> <label for="hat-color-indigo" class="indigo">indigo</label> <input type="radio" name="hat-color" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet"/> <label for="hat-color-violet" class="violet">violet</label> </div> <h6>Feed</h6> <div class="colorPicker2" > <input type="radio" name="hat-color2" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red2"/> <label for="hat-color-red" class="red2">red</label> <input type="radio" name="hat-color2" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange2"/> <label for="hat-color-orange" class="orange2">orange</label> <input type="radio" name="hat-color2" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow2"/> <label for="hat-color-yellow" class="yellow2">yellow</label> <input type="radio" name="hat-color2" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green2"/> <label for="hat-color-green" class="green2">green</label> <input type="radio" name="hat-color2" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue2"/> <label for="hat-color-blue" class="blue2">blue</label> <input type="radio" name="hat-color2" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo2"/> <label for="hat-color-indigo" class="indigo2">indigo</label> <input type="radio" name="hat-color2" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet2"/> <label for="hat-color-violet" class="violet2">violet</label> </div> <h6>Feed Content</h6> <div class="colorPicker" > <input type="radio" name="hat-color3" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red"/> <label for="hat-color-red" class="red">red</label> <input type="radio" name="hat-color3" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange"/> <label for="hat-color-orange" class="orange">orange</label> <input type="radio" name="hat-color3" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow"/> <label for="hat-color-yellow" class="yellow">yellow</label> <input type="radio" name="hat-color3" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green"/> <label for="hat-color-green" class="green">green</label> <input type="radio" name="hat-color3" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue"/> <label for="hat-color-blue" class="blue">blue</label> <input type="radio" name="hat-color3" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo"/> <label for="hat-color-indigo" class="indigo">indigo</label> <input type="radio" name="hat-color3" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet"/> <label for="hat-color-violet" class="violet">violet</label> </div> <input type="text" id="usr_id" name="usr_id" class="MsgInputHidden" value="<?= $_SESSION['user']['id'] ?>" /> </div>中的本机自定义元素一起使用。 我按照the docs说:

  

将Polymer元素与其他元素或框架一起使用时,可以手动将on-property-changed侦听器附加到要通知属性更改的元素,并根据新值执行必要的操作。

所以我创建了一个元素,并附加了它的绑定:

dom-bind

然后,为了遵循通知协议,我将听众附加到<my-element notify="{{text}}"></my-element> 事件,我尝试通过property-changedaddEventListener属性附加它们,但这些都没有。

属性已更改,但我没有收到通知,也无法使用它。

实例:http://jsbin.com/dijequ/edit?html,output

我在on-property-changed元素中使用它,我不能使用dom-bind因为我需要直接属性绑定,因为在我的实际情况中我需要绑定到共享数据对象。

它是Polymer中的错误,文档中的错误,还是我做错了什么?如何获得有关房产变更的通知?

1 个答案:

答案 0 :(得分:0)

我找到的唯一解决方案是定义普通的JS setter。

因此,无视Polymer的协议,我们可以获得与框架无关的功能:

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;
    }
  });
};

工作示例:http://jsbin.com/bezuya/edit?html,output