Published
Edited
Nov 22, 2020
Importers
1 star
render(htm)`
<p>Lorem <i>ipsum</i></p>
`
render(htm, html`<div style="color: red"/>`)`
<p>Lorem <i>ipsum</i></p>
`
viewof testValue = render(htm)`<input type="range"/>`
testValue
viewof t1 = render(htm)`<${Test}/>`
class Test extends Preact.Component {
constructor() {
super();
this.ref = Preact.createRef();
this.state = { value: 0 };
}
onInput() {
return (evt => {
var value = parseInt(evt.target.value);
this.setState({ value: value });
console.log('onInput', evt.target.value, this.state);
evt.stopPropagation();
this.ref.current.value = value;
this.ref.current.dispatchEvent(
new InputEvent('input', { bubbles: true })
);
}).bind(this);
}
componentDidMount() {
debugger;
this.ref.current.value = this.state.value;
console.log("componentDidMount", this.state);
this.ref.current.dispatchEvent(new InputEvent('input', { bubbles: true }));
}
render({ children }, { value }) {
return htm`<div ref=${this.ref}><ul>${[
...Array(value).fill(false),
true
].map((input, idx) =>
input
? htm`<li key='input'><input onInput=${this.onInput()} value=${value}/></li>`
: htm`<li key='not-input-${idx}'>Not an input (#${idx})</li>`
)}
</ul></div>`;
}
}
t1
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.
