Question

实际上我在我的应用程序中使用了Polymer元素A，B，C和D。考虑以下情况。

1）元素A具有名为＆＃39; devEnable＆＃39;的布尔属性。
  2）元素A具有名为＆＃39; devEnableChanged＆＃39;
的attributeChanged事件   3）我的业务逻辑是在'devEnableChanged＆＃39;中实现的。事件
  4）其他元素 - ＆gt; B延伸A，C延伸A，D延伸A

现在我运行我的应用程序，当属性devEnable更改为true或false时，devEnableChanged事件被激活3次，因为我的业务逻辑也被激活了3次。所以我想避免多次触发devEnableChanged事件。

有没有办法避免多次调用它？

Answer 1

使用基础聚合物元素（A）作为前一种衍生聚合物元素（B，C或D）的模板标签中的一种组合物，是一种选择，而不是遗产：

的index.html：

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="derived-element.html">
</head>
<body>

    <derived-element id="derivedElement" value="3546"></derived-element>
    <input type="button" id="assignBaseElementButton" value="assign base"/>
    <input type="button" id="assignDerivedElementButton" value="assign derived"/>
    <input type="text" id="valueField"/>

</body>
<script>

    document.getElementById('assignDerivedElementButton').addEventListener('click',function(){

        var derivedElement = document.querySelector('#derivedElement');

        var textFieldValue = document.getElementById('valueField').value;

        // get derived element's attribute value to assign it to a value of valueField textfield
        derivedElement.value = textFieldValue;

    });

    document.getElementById('assignBaseElementButton').addEventListener('click',function(){

        var derivedElement = document.querySelector('#derivedElement');

        var textFieldValue = document.getElementById('valueField').value;

        // get base element's attribute value to assign it to a value of valueField textfield 
        derivedElement.getBaseElement().value = textFieldValue;

    });

</script>
</html>

派生element.html：

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/base-element.html">
<polymer-element name="derived-element" attributes="value">
    <template>
        <!-- embed base element here -->
        <base-element id="baseElement"></base-element>
        <div>
            derived element'value: {{value}}
        </div>
    </template>
    <script>
        Polymer('derived-element',{
            value: null,
            ready:function(){
                this.getBaseElement().baseValue = this.value;
            },
            // watcher for value property
            valueChanged: function(oldvalue, newvalue) {

                // this method is called once
                console.log('my-element', 'oldvalue: ',oldvalue, ' newvalue: ',newvalue);

            },
            getBaseElement:function(){
                return this.$.baseElement;
            }
        });
    </script>
</polymer-element>

基元素：

<link rel="import" href="/bower_components/polymer/polymer.html">
<polymer-element name="base-element">
    <template>
        <span>Hello from <b>base-element</b>. This is my Shadow DOM. And my value is {{value}}</span>
    </template>
    <script>
        Polymer('base-element',{
            value: null,
            // watcher for value property
            valueChanged: function(oldvalue, newvalue) {

                // this method is called once
                console.log('base-element', 'oldvalue: ',oldvalue, ' newvalue: ',newvalue);

            }
        });
    </script>
</polymer-element>

如何多次避免Polymer元素的AttributeChanged事件调用

1 个答案: