如何触发属性聚合物中的更改功能

How to fire the attributeChanged-Function in Polymer

本文关键字：功能 何触发 属性 聚合物      更新时间：2023-09-26

我有一个简单的聚合物画布对象，如下所示：

<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

相关文章：