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
The code below creates a todo list that allows a user to add, prioritize, and remove elements.
And here's what it produces:
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 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.
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.