Question

基本上我正在设计一个元素，比如说<parent-element> 根据childNode的内容 。

所以当我这样做时

<parent-element>
  <div> </div>
  <child-element> </child-element>
  <paper-button> </paper-button>
</parent-element>

一切都很好。但是当我想要动态添加新子项时，我希望得到一个事件/回调：

Polymer.dom(document.querySelector('parent-element')).appendChild(document.createElement('p'))

如何获得触发新孩子的回调/事件？

我已尝试过所有生命周期回调，created, attached, detached, attributeChanged

此外，根据此组件的设计，它可以包含任何类型的子项，常规HTML标记，Web组件等。因此必须在我的<parent-element>中触发事件元素，而不是任何孩子。

@ebidel在他的一个答案中提到（如果我发现它会发布链接），答案是 MutationObservers 。

Polymer 1.0 是否附带任何可以帮助我而不使用MutationObservers的东西？

如果没有，这是在这里实现MutationObserver最高效的方法吗？并在哪个生命周期回调元素？对不起，我是MutationObserver的新手。

Answer 1

除非您的子元素是Polymer自定义元素，否则我恐怕您要使用 MutationObservers 。类似的东西：

<!DOCTYPE html>
<html>
<head>
  <title>polymer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
</head>
<body>

<dom-module id="x-test">
  <template>
    <h1>Mutation Observer Test</h1>
    <button on-tap="addTapped">Add Node</button>
    <button on-tap="removeTapped">Remove Node</button>
    <div id="insertion_point" style="color:red"></div>
    <div id="console_log"></div>
  </template>
</dom-module>

<script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-test',
      properties: {
        _mo: {type: Object, value: function () {return {};}}
      },
      ready: function () {
        // first, define the mutation observer.
        var t = this;
        this._mo = new MutationObserver(function (mutations) {
          // because mutations are "collected in intervals"
          mutations.forEach(function(mutation) {
            t.consoleLog("node added or removed detected");
            // add in your tasks when node is added/removed here
          });
        });
        // next, start observing.
        this._mo.observe(this.$.insertion_point, {
          // configure `childList` to be true to listen to node addition/deletion
          childList: true
        });
      },
      consoleLog: function (m) {
        var el = document.createElement("div");
        el.innerHTML = m;
        Polymer.dom(this.$.console_log).appendChild(el);
      },
      addTapped: function () {
        var el = document.createElement("span");
        el.innerHTML = "new node!";
        Polymer.dom(this.$.insertion_point).appendChild(el);
      },
      removeTapped: function () {
        var el = Polymer.dom(this.$.insertion_point).lastElementChild;
        Polymer.dom(this.$.insertion_point).removeChild(el);
      }
    });
  });
</script>

<x-test></x-test>


</body>
</html>

Jsbin：http://jsbin.com/huxuloyobi/edit?html,output

我在ready回调中定义了MO，因为默认值和模板元素已经准备就绪。

用于添加childNodes的聚合物事件/回调

1 个答案: