javascript - 具有aurelia和箭头功能的Selectize.js

我正在玩所有现代的东西，es2016，aurelia，打字稿。

我正在使用jquery selectize库，播放效果不佳。

我有这个

    $('#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);
                    });
                }
            });

渲染中的调试语句永远不会被命中。你知道为什么会这样吗？

我的代码几乎是从selectizejs演示站点复制并粘贴的，但是我修改了加载和渲染以使用箭头功能。

任何帮助都会很棒

谢谢

最佳答案

您在哪里运行代码？问题很可能是您在附加DOM之外运行代码的事实。如果将代码放在viewmodel中的attached()方法内，则它将起作用（除非那是您已经在做的）。

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);
                    });
                }
            });
}

}