如何在 Polymer 中触发 attributeChanged-Function

Question

我有一个简单的 Polymer canvas 对象，如下所示：

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

但是当我手动更改属性时，attributeChanged() 函数不会触发。我究竟做错了什么？我我有绑定的输入three。当我从 canvas-diagram-Element.

更改属性时，更改它也不会触发函数 ald

Answer 1

这取决于属性的变化。我不认为有一种全球性的方式来检查所有归因于变化。我很确定你必须自己检查每个属性是否有变化。例如，如果我想知道你的元素的类型属性何时改变，我会使用像这样的函数。

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

然后你需要为每个属性创建一个类似上面的函数，你需要一个函数在更改时触发。

编辑：下面是我能想到的最简单的例子。该按钮将更改元素的文本属性，更改将触发触发警报的 textChanged 函数。

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

如何在 Polymer 中触发 attributeChanged-Function

How to fire the attributeChanged-Function in Polymer

javascript

polymer