Polymer通过父级观察子属性

Question

考虑父节点:: -

<poly-parent>

它的子节点为:: <poly-child>

我希望父母能够跟踪孩子可以拥有'attChild'的特定属性的最大值。我可以使用attChildChanged跟踪元素的更改。

父母如何跟踪max attChild？ :: -

     <poly-parent> 
        <poly-child attChild="2"></poly-child>
        <poly-child attChild="4"></poly-child>
     </poly-parent>

是否采用聚合物（ic）方式？ 我想避免从attChildChanged

调用父方法

Answer 1

在attChildChanged方法中，您可以执行以下操作：

var max = 0;
for(var i=0; i<document.getElementsByTagName('poly-child').length; i++){
    if(parseInt(document.getElementsByTagName('poly-child')[i].getAttribute("attChild")) > max){
        max = parseInt(document.getElementsByTagName('poly-child')[i].getAttribute("attChild"));
    }
}
return max;

假设这个脚本的范围是<poly-parent>，那么该文档将成为它的影子DOM的根，并且它将能够访问这些元素。如果您试图在影子DOM之外运行JS并且<poly-child>元素位于影子DOM中，那么您必须使用.shadowRoot属性来穿透影子DOM

修改

在<poly-parent>中使用变异观察者可以做到这一点

//The max value
var max = 0;

// select the target nodes
var targets = document.getElementsByTagName('poly-child');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    //Check the new max
    max = 0;
    for(var i=0; i<document.getElementsByTagName('poly-child').length; i++){
        if(parseInt(document.getElementsByTagName('poly-child')[i].getAttribute("attChild")) > max){
            max = parseInt(document.getElementsByTagName('poly-child')[i].getAttribute("attChild"));
        }
    }
  });    
});

// configuration of the observer:
var config = { attributes: true };

// pass in the target nodes, as well as the observer options
for(var i=0; i<targets.length; i++){
    observer.observe(targets[i], config);
}