Интеграция плагина select2 в aurelia

Question

Я интегрирую плагин в aurelia и сталкиваюсь с проблемой при привязке данных, которые я получаю от вызова ajax, и занимает несколько секунд после рендеринга моего пользовательского элемента.

import 'select2' 
 
import 'select2/css/select2.css!' 
 
import { 
 
    bindable, 
 
    bindingMode, 
 
    customElement, 
 
    inject 
 
} from 'aurelia-framework' 
 
import $ from 'jquery' 
 

 
@customElement('select2') 
 
@inject(Element) 
 
export class CustomSelect { 
 
    @bindable name = null 
 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) selected = {} 
 
    @bindable options = [] 
 
    @bindable labelField = "label" 
 
    @bindable valueField = "value" 
 

 
    constructor(element) { 
 
     this.element = element 
 
    } 
 

 
    bind() { 
 
     this.isComplexModel = this.options && this.options.length > 1 && (typeof this.options[0] !== "string" && typeof this.options[0] !== "number") 
 
     this.translateModel() 
 

 
     this.selectedValue = this.options[0].value 
 
     this.selectedValue = !this.selected ? this.selectedValue : this.selected[this.valueField] 
 
    } 
 

 
    attached() { 
 
     $(this.element).find('select') 
 
      .val(this.selectedValue) 
 
      .select2() 
 
      .on('change', (event) => { 
 
       if (this.isComplexModel) { 
 
        this.selected = event.currentTarget.selectedOptions[0].model 
 
       } else { 
 
        this.selected = event.currentTarget.selectedOptions[0].model.value 
 
       } 
 
       
 
       let changeEvent 
 

 
       if (window.CustomEvent) { 
 
        changeEvent = new CustomEvent('change', { 
 
         detail: { 
 
          value: event.target.value 
 
         }, 
 
         bubbles: true 
 
        }) 
 
       } else { 
 
        changeEvent = document.createEvent('CustomEvent') 
 
        changeEvent.initCustomEvent('change', true, true, { 
 
         detail: { 
 
          value: event.target.value 
 
         } 
 
        }) 
 
       } 
 
       $(this.element).val(event.target.value) 
 
       this.element.dispatchEvent(changeEvent) 
 
      }) 
 
    } 
 

 
    translateModel() { 
 
     if (this.isComplexModel) { 
 
     this.options = this.options.map((option) => $.extend(option, {"label": option[this.labelField], "value": option[this.valueField]})) 
 
     } else { 
 
     this.options = this.options.map((option) => $.extend({}, {"label": option, "value": option})) 
 
     } 
 
    } 
 
}

<template> 
 
    <select name.bind="name" id.bind="name"> 
 
     <option repeat.for="option of options" value.bind="option.value" model.bind="option">${option.label}</option> 
 
    </select> 
 
</template>

В этом коде прилагается только вызывается один раз (в тот момент, возможности, предоставляемые не определено), и я не удалось найти какой-либо способ обновить ВЫБ.2 с последними данными, Я получаю от API.

Мне нужна ваша помощь, чтобы сделать этот пользовательский элемент работоспособным, когда и когда параметры меняют свое состояние. Заранее спасибо!

Answer 1

Я понимаю, что прошло много времени с тех пор, как этот вопрос был задан, но я только что сделал реализацию Select2 v4.0.3 в Aurelia. Я думал, что смогу поделиться им с тобой. Это немного другой подход, чем вы, и это может быть не идеальное решение, но вы можете взглянуть. Может быть, вы будете черпать вдохновение :)

https://github.com/Kla3mus/select24aurelia

с одним и несколькими выбирать режимы должны работать. Select2 немного придирчив, когда дело доходит до значений, которые вы установили, поэтому выбранный должен быть целым массивом.

Это в машинописи, а не в JavaScript, но его довольно легко изменить в соответствии с вашими потребностями.