Home | Hello world | Component | Pursx 1 | Events 1 | Effects | Pursx 2 | Events 2 | Portals | SSR |

Events 2

Dynamic children

Up until now, our DOM has been static. This is OK in some cases, but in many cases, we need a dynamic DOM: one whose elements are inserted and removed based on user interaction. In Deku, we achieve this with Event-s.

The code below creates a todo list that allows a user to add, prioritize, and remove elements.

And here's what it produces:

Events of events

In the previous sections, DOM element constructors like div_ could only accept an Array. They also can accept an event of events. In this case, the outer event represents a dynamic element, and the inner event represents the stage of dynamism with a data type called Child. Child has three constructors:

  • insert, which takes an element.
  • sendToTop, which sends the current element to the top of its parent.
  • remove, which removes the element from its parent.

The Deku engine listens for these in a specific order. Insert can be followed by 0 or more SendToTop-s. When a Remove is called, the stream is unsubscribed from the parent. Because we're in the land of Event-s, you can emit anything, but this is the how they will be listened to.

Next steps

In this section, we used nested events to insert and remove elements from a parent. In the next section, we'll see how we can use portals to move an element to a different place of the DOM.