Aurelia and Select2 change event

Aurelia의 데이터 바인딩을 Select2와 어떻게 활용할 수 있습니까? 그것은 표준 선택과 함께 잘 작동하는 것 같습니다.Aurelia and Select2 change event

이상적으로 select 요소에서 change.delegate를 사용하여 내 View Model 내에서 메소드를 호출하여 우리가 주입중인 데이터 저장소에 액세스 할 수있게하고 싶습니다.

이벤트를 발생시킬 수있는 유일한 방법은 attached() 핸들러에서 변경 이벤트를 연결하는 것이지만 데이터 저장소가 범위를 벗어납니다.

보기

<template> 
    <label>Company:</label> 
    <!-- i would like to use change.delegate="change()" below --> 
    <select value.bind="selectedCompanies" multiple> 
     <option repeat.for="company of companies" model.bind="company.CompanyId">${company.CompanyName}</option> 
    </select> 
</template>

보기 모델 : 보조 노트에

import {inject, bindable} from 'aurelia-framework'; 
import {FilterCompanyData} from 'data/custom elements/filters/filterCompanyData'; 
import {UserStorage} from 'storage/userStorage'; 

@inject(Element, FilterCompanyData, UserStorage) 
export class FilterCompanyCustomElement { 
    @bindable selectedCompanies; 

    constructor(element, filterCompanyData, userStorage) { 
     this.element = element; 
     this.filterCompanyData = filterCompanyData; 
     this.userStorage = userStorage; 
     this.companies = []; 
    } 

    bind(bindingContext, overrideContext) { 
     let userId = this.userStorage.userId; 

     return this.filterCompanyData 
      .getCompanies(userId) 
      .then(response => this.companies = response); 
    } 

    attached() { 
     var el = $(this.element).find('select'); 
     var sel = el.select2({ 
      closeOnSelect: false 
     }); 

     // Is it possible to get rid of this? 
     sel.on('change', function (event) { 
      if (event.originalEvent) { return; } 

      // TODO add changed data to user storage 

      var IE = ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)); 
      var notice = IE ? new CustomEvent('change', { bubble: false }) : new Event('change', { bubble: false }); 

      $(el)[0].dispatchEvent(notice); 
     }); 
    } 

    detached() { 
     $(this.element).find('select').select2('destroy'); 
    } 

    change() { 
     // I'd like to use this method from change.delegate 
     // TODO add changed data to user storage 
    } 
}

는 아우렐 리아가 새로운 이벤트에 대한 polyfill를 내장하고 있지 않습니다? IE는 그런 것을 좋아하지 않습니다.

출처

2016-08-23 Dev Questions

당신이 사용하는 경우 '새로운 이벤트 수정할 수있을 것이라고 생각이야 ('변화 ', {거품 : TRUE});' 'change.delegate'가 작동해야합니다. –