Best way to update viewof DOM from code ?

Community Help
1

I need make a relatively custom and complex input group - with sliders, checkbox, etc - with some divs updated inside the input group. Using viewof enables to show the input group and collect its state.

Now I need set this input group state with some preset value with a button. In the notebook below I have a working solution but am really not sure this the recommended way to do it.

Utimately the objective would be composing such custom elements recursively.

So I would be grateful for directions/corrections.

1 Like
2

What I like to do is to separate the state / datastore from the control, as described in https://observablehq.com/@severo/data-structure-with-events.

And then, in the DOM controls (see the cells: min, current, max, play), I listen to the datastore events, and update the DOM accordingly.

2 Likes
3

Nice. Very organized.

1 Like
4

I carried on exploring my initial path as the main objective of separating state in an EventTarget derived object is mostly useful for very flexible and fine grain control.

However in my use case, I am mostly concerned with finding a simple way of composing/nesting viewof-able components in custom trees with a view to building dashboards out of sub-dashboard

Here is a “proposal”. Again I’m very interested in feedback on the code and the text - especially if you spot errors !

2 Likes
5

Perhaps there’s something of value for you in the list below.

I’ve explored ways to combine views in

As for Jeremy’s input widgets, a wrapper that makes them mutable can be found here:

Another experimental form builder can be found here:

I tried my hand at a plugin based, extensible form builder here:

… with an experimental implementation here:

And lastly (?) there’s this dashboard experiment:

2 Likes
6

Thank you VERY MUCH for all this info and examples!
I read them carefully, learnt a lot, and tapped some ideas to enrich my ‘nesting viewof’ approach.

2 Likes
7

See also the ongoing discussion at Compound (multi-value) inputs? · Issue #73 · observablehq/inputs · GitHub