Change Handlers

Controls can easily be bound to a function to handle change events via data-bind-change This impliments jQuery .change() (https://api.jquery.com/change/)

Example

Given the template:

<h1>Loop Example</h1>
<!-- there should only be one direct child node of an element implimenting data-bind-for -->
<select data-bind-change="characterChanged">
    <option>Westly</option>
    <option>Indigo Montana</option>
    <option>Buttercup</option>
    <option>Miricle Max</option>
</select>

And the component:

class Example extends Component {

    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 characterChanged(src: JSPAEvent): void {
        let character = src.$el.find(":selected").text();
    }
}