我有一个简单的聚合物画布对象,如下所示:
<polymer-element name="canvas-diagram" attributes="type width height json">
<template>
<div id="canvasField">
Typ: {{type}}, Width:<input value="{{width}}">, Height:{{height}}, json:{{json}}
<div id="canvasContainer">
<canvas id="canvasObj" width="{{width}}" height="{{height}}"></canvas>
</div>
</div>
</template>
<script>
function getMaxOfArray(numArray) {
return Math.max.apply(null, numArray);
}
Polymer("canvas-diagram",{
type: "bar",
width: "300",
height: "200",
ready: function() {
console.log("this.ready()");
this.writeDiagram();
},
attributeChanged: function(attrName, oldVal, newVal) {
console.log("this.attributeChanged()");
console.log(attrName, 'old: ' + oldVal, 'new:', newVal);
this.writeDiagram();
},
writeDiagram : function(){
[...]
},
json: {
data:[
{"name":"Texts","value":"150"},
{"name":"Videos","value":"50"},
{"name":"Audio","value":"30"},
{"name":"Test","value":"20"},
{"name":"Test","value":"20"},
{"name":"Test","value":"20"}
]}
});
</script>
</polymer-element>
但是当我手动处理属性时,属性更改() 函数不会触发。我做错了什么?我 我 是 绑定输入 三.当我从画布图元素更改属性时,更改它也不会触发函数 ald。
这取决于属性的变化。 我认为没有一种全局方法来检查所有归因的变化。 我很确定您必须通过其自身来检查每个属性以进行更改。 例如,如果我想知道元素的 type 属性何时更改,我会使用这样的函数。
typeChanged: function () {
console.log(this.type);
}
然后,您需要为更改时需要触发的每个属性创建一个类似于上面的函数。
编辑:下面是我能想到的最简单的例子。 该按钮将更改元素的 text 属性,更改将触发 textChanged 函数,该函数将触发警报。
http://plnkr.co/edit/7swMG6dwMqwyutwMaYfd?p=preview