Published unlisted
Edited
Dec 7, 2021
Form with composite data and some controls
viewof data = Inputs.input(undefined) //required for reactivity when you click 'additem' button
viewof controls = Inputs.input([5, 59, 54].map(control))
viewof controlValues = [...data.map(v => v.value)]
controls, inputsForm()
controls, inputsForm()
control = (v) => {
let a = html`<div></div>`
a.value = v
return a
}
initializeData = {
setData(viewof controls.value)
}
inputsForm = () => html`
${addButton()}
${viewof data.value.map((o, i) => Inputs.bind(Inputs.range([0, 255], {step: 1}), viewof data.value[i]))}` //doesnt' matter if you map `data` or `controls`, works the same.
setData = (val) => {
val.map(div => div.oninput = () => set(viewof data, val))
set(viewof data, val)
}
addButton = () => {
let out = html`<button>+ add item</button>`
out.onclick = () => {
//console.log(...(viewof controls.value).map(v => v.value))
let val = [...(viewof controls.value).map(v => v.value), 5].map(control)
set(viewof controls, val)
setData(val)
}
return out
}
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.
