Selectize.js with aurelia and arrow functions

Question

I am playing around with all the modern stuff, es2016,aurelia,typescript.

I am using the jquery selectize library which is not playing quite right.

I have this

    $('#select-repo2').selectize({
                valueField: 'id',
                labelField: 'id',
                options: [],
                create: false,
                render: {
                    option: (item,escape) => {
                        debugger
                        return '<div>' +
                            '<span class="title">' +
                                '<span class="name">' + escape(item.first_name) + escape(item.last_name) + '</span>' +
                                '<span class="by">' + escape(item.email_address) + '</span>' +
                            '</span>' +
                        '</div>';
                    }
                },
                load: (query, callback) => {
                    if (!query.length) return callback();
                      this.contactService.find(encodeURIComponent(query)).then(response=>{
                      //  return callback({ 'value': input, 'text': input});
                         //   var data = [];
                       //    data.push({ 'value': response.data[0].id, 'text': response.data[0].email_address});
                              //return callback({ 'value': response.data[0].id, 'text': response.data[0].id});
                                                //   return callback(data);

                     return callback(response.data);
                    });
                }
            });

The debug statement within render is never hit. Do you know why this could be happening?

My code is pretty much a copy and paste from the selectizejs demo site however I have modified load and render to use a arrow functions.

Any help would be great

Thank you

Answer 1

Where are you running your code? The issue is most likely the fact you're running your code outside of when the DOM is attached. If you put your code inside of an attached() method in your viewmodel, it should then work (unless that is what you are already doing).

export class MyViewModel {

attached() {
$('#select-repo2').selectize({
                valueField: 'id',
                labelField: 'id',
                options: [],
                create: false,
                render: {
                    option: (item,escape) => {
                        debugger
                        return '<div>' +
                            '<span class="title">' +
                                '<span class="name">' + escape(item.first_name) + escape(item.last_name) + '</span>' +
                                '<span class="by">' + escape(item.email_address) + '</span>' +
                            '</span>' +
                        '</div>';
                    }
                },
                load: (query, callback) => {
                    if (!query.length) return callback();
                      this.contactService.find(encodeURIComponent(query)).then(response=>{
                      //  return callback({ 'value': input, 'text': input});
                         //   var data = [];
                       //    data.push({ 'value': response.data[0].id, 'text': response.data[0].email_address});
                              //return callback({ 'value': response.data[0].id, 'text': response.data[0].id});
                                                //   return callback(data);

                     return callback(response.data);
                    });
                }
            });
}

}