Published
Edited
Feb 5, 2021
1 fork
Importers
teaser.history
n_v1
(viewof n_v1._history)
md`#### Example with extra buttons buttons`
viewof n_v1 = numberBoxWithHistoryV1()
md`#### Example with builtin(!) buttons`
viewof mybox_v2 = numberBoxWithHistoryV2()
mybox_v2.history
{
const form = html`<form onsubmit="return false;"> <span>Setting the value doesn't work</span>
<button name=random>random</button> <small> This doesn't work. I'm not sure how to programatically set the value like with @severo without rewriting the underlying input code. See version1. Or, adding a "random value" button to the numberBoxWithHistoryV2()</small>
</form>`;
form.random.onclick = () => {
console.log(mybox_v2.history);
viewof mybox_v2.value = Math.random()*1000; // doesn't work
console.log(mybox_v2.value);
mybox_v2.value = Math.random()*1000; // changes the value, but doesn't fire a dispatch (reactivity) and doesn't update the history. Need to write a setter.
console.log(mybox_v2.value);
};
return form;
}
md`### Questions
- When entering a 3 digit number (like 357), it shows "3", then "35", then "357". This can be alleviated with a submit button.
- For an input like a slider, that continuously updates as we are dragging. We might just want the history of the mouseup event. I'm not sure how I would attempt to do that, except by making some custom input controls
v2 fixes this with using debounce().
v1 leaves it as is.
`
md`# Requires and imports`
// import {number} from "@severo/inputs-setter"
// I copied the input2 and originalNumber from "@severo/inputs-setter" and modified them.
import {number} with { input3 as input } from "@jashkenas/inputs"
import {addSetter} from "@severo/inputs-setter"
d3format = require("d3-format@1")
import {Table} from "@observablehq/inputs"
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.
