Local Render
Render a single component instead of the whole page after an event.
Local Render
By default, all Components are rendered after each Event Binding that a user triggers.
You can disable this by turning Auto Render off for a component. You can then render that manually, but this will rerender the whole page.
If you only want to re-render a single component, and its children, you can do that instead. It's easy to introduce subtle bugs when using this feature.
Live Demo
Source
package examples
import (
"context"
l "github.com/SamHennessy/hlive"
. "github.com/SamHennessy/hlive/hhtml"
)
// LocalRenderDemo is a live, interactive instance of the Local Render
// example, served for the "Live Demo" iframe.
func LocalRenderDemo() *l.Page {
count := l.Box(0)
page := l.NewPage()
page.DOM().Title().Add("Local GetNodes Example")
page.DOM().Head().Add(Link(Rel("stylesheet"), Href("https://cdn.simplecss.org/simple.min.css")))
page.DOM().Body().Add(
Header(
H1("Local Render"),
P("By default, the whole page if checked for difference after an event. "+
"You can override that behaviour and chose to only render a component and it's children."),
),
Main(
H2("Global Render"),
H4("Everything will update"),
newCountBtn(count),
l.Group(" The count is: ", Em(count), " clicks"),
H2("Local Render"),
H4("Only the button will update"),
newCountBtnLocal(count),
l.Group(" The count is: ", Em(count), " clicks"),
),
)
return page
}
// Forced to a Component (rather than the hhtml Button() tag builder) because
// the click binding is attached after creation.
func newCountBtn(count *l.NodeBox[int]) *l.Component {
c := l.C("button", count)
c.Add(l.On("click", func(ctx context.Context, e l.Event) {
count.Lock(func(v int) int { return v + 1 })
}))
return c
}
// Forced to a Component for the same reason as newCountBtn, and because
// AutoRender is a Component-only field.
func newCountBtnLocal(count *l.NodeBox[int]) *l.Component {
c := l.C("button", count)
// Don't render this component when an event binding is triggered
c.AutoRender = false
c.Add(l.On("click", func(ctx context.Context, e l.Event) {
count.Lock(func(v int) int { return v + 1 })
// Will render the passed component and it's subtree
l.RenderComponent(ctx, c)
}))
return c
}