Key Binding

JSPA provides two options for binding keys to the DOM, keydown and keyup both work the same and use JQuery's keyup / keydown events.

Both methods will provide a standard JSPAEvent object to the TypeScript

$el: JQuery The src DOM object that has been clicked

component: any The component itself

data: any The data passed to the click binding

val: any The value bound within the parentheses of the click handler

evt: any The jQuery click event

Example

Given the template:

<h1>Key Example</h1>
<div>
    <!-- keydown input -->
    <input type="text" data-bind-keydown="keyDown" />

    <!-- keyup input -->
    <input type="text" data-bind-keyup="keyUp" />


</div>

And the component:

class Example extends Component {
    private dataStore.clickValue = "Indigo Montana";

    constructor() {
        // uses the default name for the template - which is "content"
        super("Components\example\example-template.html"); 
    }

    public draw(args: any): Promise<JQuery> {
        return new Promise((resolve) => {
            // no data passed to be bound, so whole component used
            let $page = this.getTemplate("content");
            resolve($page);
        });
    }

    private keyDown(src: JSPAEvent) {
        // fires on key down
    }
    private keyUp(src: JSPAEvent) {
        // fires on key up
    }

}