fasthtml and aplinejs integration

Question

I am using fasthtml and trying out alpinejs for some interactivity. I am stuck with the @click attribute. I can't find a way of getting @click to render in the generated html.

Here is how it is described in the aplinejs documentation.

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle Content</button>
 
    <div x-show="open">
        Content...
    </div>
</div>

Obviously, Button("Close", @click="open = ! open"). produces an error in python.

Can you think of any solution to this?

Answer 1

Try this:

Button('Close', **{"@click": "open =! open"})

From the docs:

It also may be that an argument in an HTML tag uses characters that can’t be used in python arguments. To handle these you can define those args using a dictionary.

Ref: FastHTML / Symbols (ie @) in tag attributes