javascript - 观察 polymer 中的含量变化

Question

我正在尝试实现一个新的 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 开发人员工具中更改元素时，没有任何反应。

观察 Polymer 内容变化的最佳方法是什么？

Answer 1

Polymer 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
  ...
}