BlurHandlers

Blur events can be assigned to any DOM element that is supported by JQuery blur event binding.

Example

Given the template:

<h1>Click Example</h1>
<div>
    <input type="text" data-bind-blur="blurHandler" />
</div>

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

        console.log("Example.blur(): ", { 
            src
        });
    }
}