如何在polymer 1.0中使用突变观察员

我找不到关于如何使用webcomponents.js polyfills中的变异观察员的文档。能给我举个例子吗

我想观察快照中指向的元素的变化

MutationObserver在polyfill webcomponents.js下的工作原理与本机相同或非常接近

您可以在自定义元素数据树的ready函数中设置MutationObserver。如果要观察在调用ready函数后添加的元素的更改，应在添加元素后设置/重新设置MutationObserver

准备就绪功能中的MitationObserver示例：

ready: function () {                    
    var mutationHandler = function (mutation) {
        var newValue = mutation.target.getAttribute("filters");
        var oldValue = mutation.oldValue;

        // filterList is a method on the element's (data-tree) prototype.
        this.filterList(mutation.target, newValue, oldValue);
    }.bind(this);

    var observerCallback = function (mutations) {
        mutations.forEach(mutationHandler);
    };

    var mutationObserver = new MutationObserver(observerCallback);

    // You can change the querySelectorAll to select other elements or narrow the results.
    // For example, Polymer.dom(this.root).querySelector("#all > li:nth-child(1)");
    var targetNodes = Polymer.dom(this.root).querySelectorAll("li");    
    targetNodes.forEach(function (targetNode) {
        mutationObserver.observe(targetNode, {
            attributes: true,
            attributeOldValue: true,
            attributeFilter: ["filters"]
        });
    });
}

下面是一个使用问题中图像中的一些代码的工作示例

：主持人{ 字体系列：Segoe UI半光、Segoe UI、Segoe、Tahoma、Helvetica、Arial、无衬线； 字体大小：15px； } 造纸厂{ 边界半径：5px； 高度：2倍； 变换：scale0.5； 宽度：1px； } 保险商实验室{ 列表样式类型：无； } 李{ 利润率：20px； } 李斯潘{ 填充：20px 10px； } .扳机{ 背景：9b9b9b； } .隐藏ul{ 显示：无； } /深/纸质材料[标高=1]。纸质材料-0{ 盒影：无； } /深度/纸张材质[标高=1]。纸张材质-0:悬停{ 盒影：0px 2px 2px 0px rgba0,0,0,0,0.14,0px 1px 5px 0px rgba0,0,0,0.12,0px 3px 1px-2px rgba0,0,0,0,0.2； } 全部的 植物 当前筛选器属性： 旧过滤器属性： 聚合物{ is:数据树， 就绪：功能{ var mutationHandler=functionmutation{ var newValue=mutation.target.getAttributefilters； var oldValue=突变。oldValue； this.filterListmutation.target，newValue，oldValue； }.这一点； var observer callback=functions{ 突变。forEachmutationHandler； }; var mutationObserver=新的mutationObserver回调； //您可以更改querySelectorAll以选择其他元素或缩小结果范围。 //例如，Polymer.domthis.root.queryselectoral>li:nth-child1； var targetNodes=Polymer.domthis.root.queryselectoralli； targetNodes.forEachfunctiontargetNode{ mutationObserver.observetargetNode{ 属性：正确， 属性值：true， attributeFilter:[过滤器] }; }; }, filterList:functiontarget、newValue、oldValue{ console.logtarget； 这是。$[new value].textContent=newValue； 这是。$[old value].textContent=oldValue； } }; 集合属性 document.querySelectorbutton.addEventListenerclick，函数{ var dataTree=Polymer.domdocument.querySelectordata-tree.root； var li=dataTree.queryselectoral>li:n-child1； li.setAttributefilters，document.querySelectorinput.value； };

---

你到底想观察什么？当用户与元素交互时？对不起，我应该更清楚。不，不是在用户交互时。我希望能够跟踪属性值何时更改。快照中没有显示任何属性，但是想法是这样的。所以您想查看元素上的属性何时更改吗？是的。例如假设所讨论的li元素有一个名为filters的属性。我希望它能够以这样的方式将函数绑定到它，如果filter属性中的值发生变化。。它将触发与其关联的函数/事件处理程序。