Published
Edited
Dec 5, 2020
root = html`
<div data-controller="hello" action="#">
<input data-hello-target="name" type="text" value="World">
<button data-action="hello#greet">Greet</button>
<span data-hello-target="message"></span>
</div>
`
application = {
const application = Application.start(root)
application.register("hello", HelloController)
return application
}
class HelloController extends Controller {
static get targets() {
return ["name", "message"]
}
get name() {
return this.nameTarget.value
}
set message(value) {
this.messageTarget.textContent = value
}
greet() {
this.message = `Hello, ${this.name}!`
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
