我正在尝试使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-changed
,addEventListener
属性附加它们,但这些都没有。
属性已更改,但我没有收到通知,也无法使用它。
实例:http://jsbin.com/dijequ/edit?html,output
我在on-property-changed
元素中使用它,我不能使用dom-bind
因为我需要直接属性绑定,因为在我的实际情况中我需要绑定到共享数据对象。
它是Polymer中的错误,文档中的错误,还是我做错了什么?如何获得有关房产变更的通知?
答案 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;
}
});
};