MyWidget.tsx
43 lines
| 969 B
| text/x-typescript
|
TypeScriptLexer
cin
|
r30 | import { djbase, djclass, bind, prototype, AbstractConstructor } from "../declare"; | ||
cin
|
r28 | |||
import { DjxWidgetBase } from "../tsx/DjxWidgetBase"; | ||||
import { createElement } from "../tsx"; | ||||
cin
|
r30 | interface MyWidgetAttrs { | ||
title: string; | ||||
counter: number; | ||||
} | ||||
interface MyWidgetEvents { | ||||
"count-inc": Event; | ||||
"count-dec": Event; | ||||
} | ||||
cin
|
r28 | |||
@djclass | ||||
cin
|
r30 | export class MyWidget extends djbase(DjxWidgetBase as AbstractConstructor<DjxWidgetBase<MyWidgetAttrs, MyWidgetEvents>>) { | ||
cin
|
r28 | |||
@bind({node: "titleNode", type:"innerHTML"}) | ||||
title = ""; | ||||
@prototype() | ||||
counter = 0; | ||||
render() { | ||||
return <div> | ||||
<h1 data-dojo-attach-point="titleNode"></h1> | ||||
cin
|
r30 | <span onclick={() => this._onIncClick()}>[+]</span> | ||
<span onclick={() => this._onDecClick()}>[-]</span> | ||||
cin
|
r28 | </div>; | ||
} | ||||
cin
|
r30 | _onIncClick() { | ||
this.emit("count-inc", { bubbles: false } ); | ||||
} | ||||
_onDecClick() { | ||||
this.emit("count-dec", { bubbles: false } ); | ||||
} | ||||
cin
|
r28 | } | ||