我正在考慮toolkitchen庫中事件冒泡的最佳實踐。我有一個組件的嵌套標記，在這個按鈕被按下，應該觸發組件層次結構中的某個事件。這是一個例子，我很好奇如果有更好的方法。也許即使是在toolkithcen庫本身的內置事件系統。工具箱冒泡事件
// In one component
mouseClicked: function() {
var evt = new CustomEvent('ganttChartNewEventRequested');
document.dispatchEvent(evt);
}
// In another component
document.addEventListener('ganttChartNewEventRequested', function(e){
alert('create new event');
}, false);
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src='http://toolkitchen.github.io/cdn/toolkit.min.js?shadow'></script>
</head>
<body>
<my-sink></my-sink>
<element name="my-source">
<script>
Toolkit.register(this, {
ready: function() {
setTimeout(function() {
this.send("hello-world");
}.bind(this), 500);
setTimeout(function() {
this.send("goodbye-world");
}.bind(this), 1500);
}
});
</script>
</element>
<element name="my-sink" on-goodbye-world="goodbyeWorld">
<template>
<my-source on-hello-world="helloWorld"></my-source>
<div >
{{message}}
</div>
</template>
<script>
Toolkit.register(this, {
message: '...',
helloWorld: function() {
this.message = 'hello world';
},
goodbyeWorld: function() {
this.message = 'goodbye world';
}
});
</script>
</element>
</body>
</html>
這種方法有效，但它打破Webcomponents，封裝的優勢之一。問題是：考慮這個問題有更好的方法嗎？ –