用于添加子节点的聚合物事件/回调

Question

基本上我正在设计一个元素，比如说 <parent-element>，其中 根据其 childNode 做一些事情是。

所以当我这样做时

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

一切都很好。但是当我想像这样动态添加新的 child 时获得事件/回调：

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

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

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

此外，根据该组件的设计，它可以具有任何类型的 child、常规 HTML 标记、Web 组件等。所以该事件必须在我的 <parent-element> 元素中触发，而不是在其任何 children.

中触发

@ebidel 在他的一个答案中提到（Will post link 如果我找到它），答案是 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，因为届时默认值和模板元素已准备就绪。

用于添加子节点的聚合物事件/回调

Polymer event / callback for adding childNodes

html

javascript

web-component

mutation-observers

polymer