Diff Apply
Trigger server-side logic when a DOM change finishes applying in the browser.
Diff Apply
Trigger a Diff Apply event when a DOM change is applied in the browser. Use it to trigger server side logic.
Live Demo
Source
package examples
import (
"context"
l "github.com/SamHennessy/hlive"
. "github.com/SamHennessy/hlive/hhtml"
"github.com/SamHennessy/hlive/hlivekit"
)
// DiffApplyDemo is a live, interactive instance of the Diff Apply example,
// served for the "Live Demo" iframe.
func DiffApplyDemo() *l.Page {
// Forced to a Component (rather than the hhtml Code() tag builder) because
// a click handler attaches an event binding to it after creation, which a
// plain Tag can't hold.
container := l.C("code")
btn := Button("Trigger Click",
l.On("click", func(ctx context.Context, e l.Event) {
container.Add(P("Click"))
onDiffApplyDemo(container)
}),
)
page := l.NewPage()
page.DOM().Title().Add("Callback Example")
page.DOM().Head().Add(
Link(Rel("stylesheet"), Href("https://cdn.simplecss.org/simple.min.css")))
page.DOM().Body().Add(
Header(
H1("Callback"),
P("Get notified when a change has been applied in the browser"),
),
Main(
P(btn),
H2("Events"),
Pre(container),
),
)
return page
}
func onDiffApplyDemo(container *l.Component) {
container.Add(
hlivekit.OnDiffApply(
func(ctx context.Context, e l.Event) {
container.Add(P("Diff Applied"))
container.RemoveEventBinding(e.Binding.ID)
},
),
)
}