Accessing an aurelia service inside of a jquery plugin's setup

Question

Im new to ES6,Typscript & Aurelia as my question will show.

I have a small aurelia application and I want to use selectizejs for the tagging function but bind it to a service I have setup within the application.

My viewmodel.ts

    attached(){
    $('#product_tags').selectize({
        delimiter: ',',
        persist: false,
        load: function(query, callback) {
            if (!query.length) return callback();
            debugger
            this.productService.getProductTags().then(response=>{
                callback(response);
            });
        },
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
}

Within the

load:function(......

How do I gain access to my service this.productService if I place breakpoint inside of the function, this. is not my viewmodel but the selectize plugin.

I must be missing something obviously on this but can't figure it out.

Answer 1

Use an es6 arrow function => to get the right this

load: (query, callback) => {
        if (!query.length) return callback();
        debugger
        this.productService.getProductTags().then(response=>{
            callback(response);
        });
    },