Table of Contents generated with DocToc
@Observable
The @Observable
decorator allows Twist to observe a property of a class. Under the hood, this sets up a getter and setter for the property, so that Twist can track which expressions depend on it, and when it changes.
Usage:
class C {
@Observable instanceProperty;
@Observable instancePropertyWithDefault = 2;
@Observable static classProperty;
@Observable static classPropertyWithDefault = 2;
}
You can use @Observable
on properties of any class (whether or not it's a component), and also for static
properties. In a component, use @Observable
for private state, and @Attribute for state that's exposed to the component's consumer.
Here's a concrete example:
class Data {
@Observable static size = 5;
}
export default <g>
<div>
Update the slider to set Data.size indirectly <br />
<input type="range" min={1} max={50} bind:value={Data.size} />
</div>
<div>
Or click a button to set Data.size directly, and watch the border update in response.
<input type="button" value="Set size to 1" onClick={ () => Data.size = 1 } />
<input type="button" value="Set size to 5" onClick={ () => Data.size = 5 } />
</div>
<div style-width='100px' style-border="1px solid red" style-border-width={ Data.size }>Border width binding example</div>
</g>;
TODO: verify above example