Click Handlers

When assigning click handlers to elements, the recieving method of the component will recieve an object containing 5 pieces of data:

$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>Click Example</h1>
<div>
    <!-- button passing no data to the handler -->
    <button type="button" data-bind-click="buttonClick">No Data</button>

    <!-- button passing data to the handler -->
    <button type="button" data-bind-click="buttonClick({{ dataStore.clickValue }})">Data</button>

</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 buttonClick(data) {
        // data.$el is the source JQuery object
        // data.component is the component
        // data.data is the src data passed to the click binder
        // data.value is a specific value passed in
        // data.evt is the the jQuery click event

        console.log("Example.click(): ", { 
            data
        });
    }
}

The output would be:

<h1>Click Example</h1>
<div>
    <!-- button passing no data to the handler -->
    <button type="button">No Data</button>

    <!-- button passing no data to the handler -->
    <button type="button">Data</button>
</div>