如何火attributeChanged，功能高分子

Question

我有一個簡單的聚合物畫布對象是這樣的：

<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> 

但是當我canhage手動屬性的attributeChanged（）函數犯規火。我究竟做錯了什麼？我敢打賭，綁定輸入threre。當我從canvas-diagram-Element中更改Attricute時，更改它也不會觸發Function。

Answer 1

它取決於屬性的變化。我不認爲有一種全球性的方法來檢查所有歸因於變化的因素。我很確定你必須通過它自己來檢查每個屬性的變化。例如，如果我想知道什麼時候你的元素的類型屬性改變，我會使用類似的功能。

typeChanged: function() { 
    console.log(this.type); 
} 

然後，您需要爲每個屬性創建一個類似上面的函數，以便在更改時觸發每個屬性。

編輯：下面是我能想到的最簡單的例子。該按鈕將更改元素的文本屬性，更改將觸發將觸發警報的textChanged函數。

http://plnkr.co/edit/7swMG6dwMqwyutwMaYfd?p=preview