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

Pursx 2

Working with events and effects

PursX would be of limited utility if it could only render static content. In this section, we'll see how to make it dynamic, both by modifying existing elements and inserting entirely new ones.

The example below is the same one from the Pursx 1 section with two differences. The first is that the background color of the second list item is set dynamically. The second is that there is a new button that is dynamically inserted.

And here's what it produces:

Dynamism in static content

Named slots for dynamic content are added to PursX with between two tildes, like ~foo~. This separator doesn't have to be a tilde - it can be set programatically as well (see the Deku/Pursx.purs module for an example of how that is done). Also, we no longer use the psx command. Instead, we use the infix operator ~~ followed by arguments to our template. In the case of dynamic attributes, the argument is a stream of attributes. In the case of a dynamic section, the arguments are of type Element.

Next steps

In more complicated apps, like this documentation, we'll need dynamic logic that allows for components to replace each other, for example in a navigation bar. In the next section, we'll see one way to do this by using events to control the presence and absence of elements.