aurelia에서 select2 플러그인 통합

Question

나는 aurelia에서 select2 플러그인을 통합하고 있습니다. 아약스 호출로부터받은 데이터를 바인딩하는 동안 문제가 발생합니다. 사용자 정의 요소가 렌더링 된 후 몇 초가 걸립니다. 한 번만 호출되는 부착이 코드에서

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

이 질문 이후로 오랜 시간이 걸렸으나 Aurelia에서 Select2 v4.0.3 구현을 직접 완료했습니다. 나는 너와 여기서 그것을 나눌 수 있다고 생각했다. 그것은 당신과는 조금 다른 접근법이며, 완벽한 해결책은 아닐지 모르지만 한 번 살펴볼 수 있습니다. 어쩌면 당신은 : 영감

https://github.com/Kla3mus/select24aurelia

단일 및 다중 선택 모드가 작동해야 얻을 것이다. Select2는 사용자가 설정 한 값에 관해서는 다소 까다롭기 때문에 정수 배열을 선택해야합니다.

JavaScript가 아닌 타이프 스크립트로되어 있지만 필요에 맞게 수정하는 것이 매우 쉽습니다.