-
|
I'm learning templ, go, and htmx currently. Not a lot of resources out there so I'm struggling a lot. Is it possible to do something like this? package web
templ CountResult(newCount string) {
<input id="" name="count" value={ newCount }/>
<span>New Count: { newCount }</span>
<button type="submit">
Increment
</button>
}
templ HelloForm(count string) {
@Base() {
<form hx-post="/hello" method="POST" hx-target="#hello-container">
<input id="name" name="name" type="text"/>
<button type="submit">Submit</button>
</form>
<div id="hello-container"></div>
<form hx-post="/increment" method="POST">
{ CountResult(count) }
</form>
}
}
templ HelloPost(name string) {
<div>Hello, { name }</div>
} |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 6 replies
-
|
Wait! I didn't read the docs enough. Lol, it was just this simple. Found it here: https://templ.guide/syntax-and-usage/template-composition : package web
templ CountResult(newCount string) {
<input id="" name="count" value={ newCount }/>
<span>New Count: { newCount }</span>
<button type="submit">
Increment
</button>
}
templ HelloForm(count string) {
@Base() {
<form hx-post="/hello" method="POST" hx-target="#hello-container">
<input id="name" name="name" type="text"/>
<button type="submit">Submit</button>
</form>
<div id="hello-container"></div>
<form hx-post="/increment" method="POST">
@CountResult(count)
</form>
}
}
templ HelloPost(name string) {
<div>Hello, { name }</div>
}I'm dumm!!!! Anyway... |
Beta Was this translation helpful? Give feedback.
-
|
Glad the docs were useful! |
Beta Was this translation helpful? Give feedback.
-
|
Is it possible to have components in different files and still be able to nest them? This is my project structure: And this is the code: // home.templ
package components
templ Home() {
@Layout() {
<h1>
Hello world!
</h1>
}
}
// components.templ
package components
templ Layout() {
<html>
<head>
<title>My Project</title>
</head>
<body>
<main>
{ children... }
</main>
</body>
</html>
}This causes Layout to not be found. If I move |
Beta Was this translation helpful? Give feedback.
-
|
No, it's just that in Go, folders correspond to package names, so given your structure: Your code would need to import the parent package: // home.templ
package home
// This ^ has changed
import "github.com/gabrielvincent/project/components"
// This ^ has been added
templ Home() {
@components.Layout() {
// This ^ has changed
<h1>
Hello world!
</h1>
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Oh, I see! This helped a lot. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
I think this point should be added into the docs, I almost quit using templ unless I found this answer. Thank you! @a-h |
Beta Was this translation helpful? Give feedback.
-
|
@trileminh94 - good idea. Where do you think it should be added? I'd take a PR for it if you have time. The docs are just markdown in the ./docs directory. |
Beta Was this translation helpful? Give feedback.
-
|
If @trileminh94 doesn't have the time, I can create a PR adding this to the docs. I think it would make sense to include it in Syntax and Usage > Template Composition. |
Beta Was this translation helpful? Give feedback.
Wait! I didn't read the docs enough. Lol, it was just this simple. Found it here: https://templ.guide/syntax-and-usage/template-composition :