Handling on events #228
Replies: 2 comments 2 replies
-
|
The current strategy would be to use standard JavaScript instead of script templates. You can use the "constant" version of HTML attributes to write any JavaScript you want. <input id="btn" type="button" onclick="(e) => alert(e)" value="Click" />Or you can use a <script>
document.getElementById("btn").addEventListener("click", greet);
</script>However, I think that a small extension to the script template processing could satisfy the use case for script templates. We'd add a new Then, a convenience variable of // JSVar is a JavaScript variable. templ will not escape this value.
// The value must be a valid JavaScript identifier that is available at
// runtime.
type JSVar struct {
Name string
}
// Event is a JavaScript event variable, commonly used in event handlers.
var Event JSVar = JSVar{Name: "event"}
// SafeScript encodes unknown parameters for safety.
func SafeScript(functionName string, params ...any) string {
encodedParams := make([]string, len(params))
for i := 0; i < len(encodedParams); i++ {
if v, isJSVar := params[i].(JSVar); isJSVar {
encodedParams[i] = v.Name
continue
}
enc, _ := json.Marshal(params[i])
encodedParams[i] = EscapeString(string(enc))
}
sb := new(strings.Builder)
sb.WriteString(functionName)
sb.WriteRune('(')
sb.WriteString(strings.Join(encodedParams, ","))
sb.WriteRune(')')
return sb.String()
}In the template, you could then do this: script alert(e templ.JSVar) {
alert("Event: " + e);
alert("Target: " + e.target);
}
templ button(global, user int) {
<input type="button" value="Do something" onclick={ alert(templ.Event) }/>
}The output is rendered as: <script type="text/javascript">
function __templ_alert_3592(e){
alert("Event: " + e);
alert("Target: " + e.target);
}
</script>
<input type="button" value="Do something" onclick="__templ_alert_3592(event)"></div>I'd love to hear your thoughts on that. |
Beta Was this translation helpful? Give feedback.
-
|
Just following up on this. Given the following templ template: package components
script onClick(name string) {
alert("Hello " + name + " from " + event.type + " event");
}
templ Button(name string) {
<button onclick={ onClick(name) }>Click me ({ name })</button>
}
templ Page() {
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
</head>
<body>
<div>
@Button("Adam")
</div>
<div>
@Button("Bob")
</div>
<div>
@Button("Charlie")
</div>
</body>
</html>
}And a package main
import (
_ "embed"
"net/http"
"onclick/components"
"github.com/a-h/templ"
)
func main() {
component := components.Page()
handler := templ.Handler(component)
http.Handle("/", handler)
http.ListenAndServe("localhost:8080", nil)
}You can access the 
The HTML that's output is as follows: <!doctype html>
<html>
<head>
<title>Buttons</title>
</head>
<body>
<div>
<script type="text/javascript">
function __templ_onClick_f1dd(name) {
alert("Hello " + name + " from " + event.type + " event");
}
</script>
<button onclick="__templ_onClick_f1dd("Adam")">Click me (Adam)</button>
</div>
<div>
<button onclick="__templ_onClick_f1dd("Bob")">Click me (Bob)</button>
</div>
<div>
<button onclick="__templ_onClick_f1dd("Charlie")">Click me (Charlie)</button>
</div>
</body>
</html>It works in Safari too. 
If you're uncomfortable with the fact that event is magically available in the function, you can rewrite the component script output to add the event parameter, or (better) make a ComponentScript of your own. I think it would be better if the Component Script output kept the FunctionName and Arguments separate, since it would make the change not so awkward as using a find/replace less brittle, so I might change up the Here's the example code for that. func EventHandler(cs templ.ComponentScript) templ.ComponentScript {
newName := cs.Name + "_EventHandler"
newFunction := strings.Replace(cs.Function, cs.Name+"(", newName+"(event, ", 1)
newCall := strings.Replace(cs.Call, cs.Name+"(", newName+"(event, ", 1)
return templ.ComponentScript{
Name: newName,
Function: newFunction,
Call: newCall,
CallInline: newCall,
}
}
script onClick(name string) {
alert("Hello " + name + " from " + event.type + " event");
}
templ Button(name string) {
<button onclick={ EventHandler(onClick(name)) }>Click me ({ name })</button>
}I'll close this discussion... Feel free to re-open if there's more to add! |
Beta Was this translation helpful? Give feedback.
-
|
I would suggest adding this to the documentation if at all possible. How to actually handle events when using script templates is pretty hard to figure out given the magic event piece. |
Beta Was this translation helpful? Give feedback.
-
|
Great idea. I'd take a PR for that if you have time? The docs are markdown in the repo, see the /docs directory. |
Beta Was this translation helpful? Give feedback.
-
How do you pass the event to the script functions when doing
onClick{Something()}?Beta Was this translation helpful? Give feedback.
All reactions