Javascript 观察聚合物的含量变化

我正在尝试实现一个新的聚合物自定义元素。但是，我想在元素内容更改时触发一个自定义事件。到目前为止，我的代码如下：

<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>

{{field}}
聚合物({
字段：“…”，
就绪：函数（）{
this.onMutation（this，this.contentChanged）；
},
内容更改：功能（e）{
log（“触发了contentChanged事件”）；
console.log（“事件=%o”，e）；
}
});

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

---

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

我在几乎每一次可能性迭代后都会碰到这个解决方案，所以这是一个经验“它起作用”的答案，而不是一个确定的“这是最好的方法”的答案

简短的版本：使用自定义

以下是我最后得到的代码：

        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个儿童列表突变。当从Chrome（它对自定义元素有很好的支持）运行时，只观察到一个characterData突变。因此，我为第一个似乎总是抓住“正确的事情”的事件启动了新事件。考虑到不同的实现，这可能有点脆弱

---

我不知道这在Firefox或Opera上是如何工作的。Caniuse.com表示，除了Opera Mini之外，所有产品都支持MutationObserver，因此我可以推测它在Opera Mini中不起作用。

聚合物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
  ...
}

附件：函数（）{
Polymer.dom（this.$.myContent）.observeNodes（this.\u nodesChanged）；
},
_nodesChanged:function（）{
var elements=this.$.myContent.getElements（）；
对于（var i=0；i

让这个答案独立于jQuery:）可能是个好主意，因为Polymer文档推荐使用这种方法而不是使用突变观察者。仅供参考，这篇文章中没有jQuery。