Skip to content

Instantly share code, notes, and snippets.

@deebloo
Last active August 26, 2020 15:27
Show Gist options
  • Save deebloo/05d6650165291ede409e63be1ca7108c to your computer and use it in GitHub Desktop.
Save deebloo/05d6650165291ede409e63be1ca7108c to your computer and use it in GitHub Desktop.
import { component, State, handle, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-counter',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('dec_btn_clicked', -1)}>-</button>
<span>${state}</span>
<button @click=${run('inc_btn_clicked', 1)}>+</button>
`
})
})
class AppElement extends JoistElement {
@get(State)
private state!: State<number>;
@handle('dec_btn_clicked')
@handle('inc_btn_clicked')
updateCount(_: Event, n: number) {
this.state.setValue(this.state.value + n);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment