Skip to content

Instantly share code, notes, and snippets.

@deebloo
Last active August 26, 2020 15:32
Show Gist options
  • Save deebloo/a5d3f51de623204fbdab4101114dd3e7 to your computer and use it in GitHub Desktop.
Save deebloo/a5d3f51de623204fbdab4101114dd3e7 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);
}
@handle(/.*/)
debug(e: Event, payload: unknown, action: string) {
console.log("TRIGGERING EVENT:", e.type);
console.log("payload:", payload);
console.log("action:", name);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment