观察聚合物的含量变化

Observing Content Changes in Polymer

本文关键字：变化 聚合物 观察      更新时间：2023-09-26

我正在尝试实现一个新的Polymer自定义元素。但是，我希望在元素的内容发生更改时激发一个自定义事件。到目前为止，我的代码如下：

<link rel="import" href="../../lib/polymer/polymer.html">
<polymer-element name="dnd-dropdown" attributes="field">
    <template>
        <link rel="stylesheet" href="dnd-dropdown.css">
        <div id="c">
            <div class="dndValue"><content></content></div>
            <div class="dndTitle">{{field}}</div>
        </div>
    </template>
    <script>
        Polymer({
            field: "...",
            ready: function () {
                this.onMutation(this, this.contentChanged);
            },
            contentChanged: function (e) {
                console.log("contentChanged event fired");
                console.log("event = %o", e);
            }
        });
    </script>
</polymer-element>

我的理论是，只要dndValue节点发生变化（即元素的内容发生变化），onMutation就会触发，并打印两条控制台消息。然而，当我在Chrome中的F12开发工具中更改元素时，什么都没有发生。

观察聚合物含量变化的最佳方法是什么？

聚合物1.7的更新方法：

使用以下模板

<template>
  <content id="myContent"></content>
</template>

您可以使用观察节点变化

attached: function() {
  Polymer.dom(this.$.myContent).observeNodes(this._nodesChanged);
},
_nodesChanged: function() {
  var elements = this.$.myContent.getElements();
  for(var i = 0; i < elements.length; i++) {
    $(elements[i]).on("change", function(){
      this.doStuffWithChangedNodes();
    }.bind(this));
  }
  this.doStuffWithChangedNodes();
},
doStuffWithChangedNodes: function() {
  var elements = this.$.myContent.getElements();
  // you can loop and work with each element
  ...
}

我在几乎每一次可能性迭代后都会遇到这个解决方案，所以这是一个经验的"它有效"答案，而不是一个明确的"这是最好的方法"类型的答案。

简短版本：使用自定义MutationObserver。

这是我最终得到的代码：

        ready: function () {
            var that = this, observer = new MutationObserver(function (mutations) {
                console.debug("Firing textChanged event on field ", that.field, " new value ", mutations[0].target.textContent);
                this.fire("textChanged", { field: this.field, value: mutations[0].target.textContent });
            }).observe(this, { childList: true, subtree: true, characterData: true });
        },

当从Internet Explorer（技术预览）运行时，总共观察到3个childList突变。当从Chrome（它对自定义元素有很好的支持）运行时，只观察到一个characterData突变。因此，我只为第一个似乎总是抓住"正确的东西"的事件而启动新事件。考虑到不同的实现，这可能有点脆弱。

我不知道这是如何与Firefox或Opera配合使用的。Caniuse.com表示，除了Opera Mini之外，其他所有领域都支持MutationObserver，所以我可以推测它在Opera Minis中不会起作用。

相关文章：