Event bubbling in toolkitchen

Question

Event bubbling in toolkitchen

68 Views Asked by Mattias Akerman At 12 April 2025 at 03:56

I'm thinking of best practices for event bubbling in toolkitchen library. I have a nested markup with components and somewhere in this a button is pressed that should trigger an event somewhere in the hierarchy of components. This is an example, and I curious if there's a better way. Perhaps even a built in event system in toolkithcen lib itself.

// 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);

Original Q&A

There are 1 best solutions below

**Mattias Akerman** · Answer 1

<!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>

Event bubbling in toolkitchen

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in TOOLKITCHEN

Trending Questions

Popular # Hahtags

Popular Questions