Aurelia trying to load HTML from Select2?

Question

So, I'm trying to use Select2 in my Aurelia application. I installed Select2 with jspm install select2, and in my file app.htmlI need Select2 with <require from="select2/js/select2.min.js"></require>. The browser is loading a miniature JS file, but for some reason it is also trying to load

http: // localhost: 3003 / jspm_packages / github / select2 / select2@4.0.0 /js/select2.min .html .

Why is Aurelia trying to load an HTML copy of the same JS file that I specified in the element <require>? How can i fix this?

thanks

Answer 1

<require from="...."></require> - . - , . <require from="select2/js/select2.min.js"></require> , aurelia , . , .../select2.min.html

"aurelia way" select2 , select2 . - :

Select2--attribute.js

import {customAttribute, inject} from 'aurelia-framework';
import {DOM} from 'aurelia-pal';
import $ from 'jquery';
import 'select2'; // install the select2 jquery plugin
import 'select2/css/select2.min.css!' // ensure the select2 stylesheet has been loaded

@customAttribute('select2')
@inject(Element)
export class Select2CustomAttribute {
  constructor(element) {
    this.element = element;
  }

  attached() {
    $(this.element)
     .select2(this.value);
     //.on('change', () => this.element.dispatchEvent(DOM.createCustomEvent('change')));
  }

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

:

app.html

  <require from="select2-custom-attribute"></require>

  <select select2 value.bind="selectedState">
    <option repeat.for="state of states" model.bind="state">${state.name}</option>
  </select>

, select2 ( , "options", select2, ):

app.html

  <require from="select2-custom-attribute"></require>

  <select select2.bind="options" value.bind="selectedState">
    <option repeat.for="state of states" model.bind="state">${state.name}</option>
  </select>

: https://gist.run/?id=0137059e029fc4b3ccd367e385f47b19

, select2 jspm, . , , select2, select2 js css script/link .

Answer 2

, change , :

attached() {
    $(this.element)
     .select2(this.value)
     .on('change', evt => {
         if (evt.originalEvent) { return; }
         this.element.dispatchEvent(new Event('change'));
     });
}

:

<require from="select2-custom-attribute"></require>

<select select2.bind="options" value.bind="selectedState" change.delegate="changeCallback($event)">
    <option repeat.for="state of states" model.bind="state">${state.name}</option>
</select>

changeCallback($event) vm .

changeCallback(evt: Event): void {
    console.log(evt);
}