Javascript 用于添加子节点的聚合事件/回调
基本上我是在设计一个元素，比如说Javascript 用于添加子节点的聚合事件/回调,javascript,html,polymer,web-component,mutation-observers,Javascript,Html,Polymer,Web Component,Mutation Observers,基本上我是在设计一个元素，比如说，它根据它的子节点做事情 所以当我这么做的时候 <parent-element> <div> </div> <child-element> </child-element> <paper-button> </paper-button> </parent-element> 如何获取触发新子级的回调/事件 我尝试了所有生命周期回调，创建、附加、分离、属性更改
子节点做事情
所以当我这么做的时候
<parent-element>
<div> </div>
<child-element> </child-element>
<paper-button> </paper-button>
</parent-element>
如何获取触发新子级的回调/事件
我尝试了所有生命周期回调，创建、附加、分离、属性更改
此外，根据该组件的设计，它可以具有任何类型的子级、常规HTML标记、Web组件等。因此事件必须在my
元素中触发，而不是在其任何子级中触发
@埃比德尔在他的一个答案中提到（如果我找到了，将发布链接），答案是变异观察者
Polymer 1.0是否提供了任何可以帮助我而无需求助于突变观察者的东西
如果不是，在这里实现MutationObserver最有效的方法是什么？元素的哪个生命周期回调？很抱歉，我对MutationObserver一无所知。除非您的子元素是聚合自定义元素，否则恐怕您必须使用MutationObserver。比如：
<!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>
聚合物
突变观察者试验
添加节点
删除节点
HTMLImports.whenReady（函数（）{
聚合物({
是‘x-测试’，
特性：{
_mo:{type:Object，value:function（）{return{}；}}
},
就绪：函数（）{
//首先，定义突变观察者。
var t=这个；
此._mo=新的突变观察者（功能（突变）{
//因为突变是“间隔收集的”
突变。forEach（功能（突变）{
t、 控制台日志（“检测到添加或删除的节点”）；
//在此处添加/删除节点时添加任务
});
});
//接下来，开始观察。
此._mo.观察（此.$插入点）{
//将“childList”配置为true以侦听节点的添加/删除
儿童名单：对
});
},
控制台日志：功能（m）{
var el=document.createElement（“div”）；
el.innerHTML=m；
Polymer.dom（this.$.console_log）.appendChild（el）；
},
addTapped：函数（）{
var el=document.createElement（“span”）；
el.innerHTML=“新建节点！”；
Polymer.dom（this.$.insertion_point）.appendChild（el）；
},
removeTapped:函数（）{
var el=Polymer.dom（这个.$.insertion\u点）.lastElementChild；
Polymer.dom（this.$.insertion\u point）.removeChild（el）；
}
});
});
Jsbin：
我在ready
回调中定义了MO，因为默认值和模板元素已经准备好了。谢谢@zerodevx！：）我会等待更多的答案（如果有的话！），然后再标记答案。如果孩子们只是高分子元素呢。没有MO我们怎么办？没问题@addyosmani写了一篇关于MutationObserver用法的优秀文章：。如果您的子元素是您自己的聚合自定义元素，我建议您只需从该元素的附加的回调中触发一个自定义事件-因此，每当它被标记到父元素的light DOM中时，该事件就会触发。
<!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>