SELECT2 AJAX не подбирает результаты - Ember.js Ember Cli Custom Component

Question

Функциональность AJAX для Select2 4.0.0 не работает. Он отображает результаты AJAX, однако, когда вы нажимаете на элемент результата, он не выбирает его. Я потратил несколько часов на то, что любая помощь будет оценена по достоинству.

Следующий код не работает:

var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 
self._select = self.$().select2({ 
    placeholder: self.get('placeholder'), 
    tokenSeparators: [','], 
    multiple: true, 
    ajax: { 
    url: "http://localhost:9990/api/v1/users/", 
    dataType: 'json', 
    delay: 250, 
    data: function (params) { 
     return { 
     q: params.term, // search term 
     page: params.page 
     }; 
    }, 
    processResults: function (data, page) { 
     return { 
     results: staticdata 
     }; 
    }, 
    cache: true 
    } 
}); 

Однако, когда я пытаюсь его без Ajax работает, и результаты выбора в поле ввода:

var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 
self._select = self.$().select2({ 
    placeholder: self.get('placeholder'), 
    tokenSeparators: [','], 
    multiple: true, 
    data: staticdata 
}); 

Answer 1

Так что это проблема заключалась в использовании select2 в качестве настраиваемого компонента ember.

При создании компонента ember вы можете либо выбрать существующий тег html, например.

1. self.$('#selecttext').select2(...) 

Где HTML тег находится в ваших уголек Cli расположения шаблонов/компонентов/ВЫБ.2-component.hbs:

<select id="selecttext" class=" form-control input-md select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true"> 
</select> 

или альтернативно только инициализировать компонент его собственного использования:

2. self.$().select2(...) 

При использовании подхода 2. Я предполагаю, что select2 обратный вызов AJAX каким-то образом теряет ссылку на компонент select2. Таким образом, когда вы выбираете результат из списка select2: выбирая, событие не генерируется и, следовательно, значение результата не выбрано.

Я проверил это с помощью:

self._select.on("select2:selecting", function(e) { 
     alert('selecting'); 
    }); 

Однако при использовании подхода 1. Ajax обратного вызова не теряет ссылку на компонент ВЫБ.2 и генерирует «Выбор2: выбирающий» событие и работает, как ожидается, с результатами возможность выбора.

Следовательно, это работает:

didInsertElement: function() { 
var self = this; 
var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 
self._select = self.$('#selecttext').select2({ 

    // note we are explicitly initialising select2 component on #selecttext 

    placeholder: self.get('placeholder'), 
    tokenSeparators: [','], 
    multiple: true, 
    tags: false, 
    //data: staticdata 
    ajax: { 
     url: "http://localhost:9990/api/v1/users/", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
     return { 
      q: params.term // search term 
     }; 
    }, 

    processResults: function (data, page) { 
     return { 
      results: staticdata 
     }; 
    }, 
    cache: true 
    } 
}); //select2 END 
} //didInsertElement END