Aurelia试图从Select2加载HTML？

Question

So I'm trying to use Select2 within my Aurelia application. I installed Select2 using jspm install select2 , and within my app.html file I require Select2 using <require from="select2/js/select2.min.js"></require> . The browser loads the minified JS file fine, but for some reason it also tries to load

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

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

Thanks

Answer 1

The purpose of <require from="...."></require> is to import a view resource into your view. View resources are things like custom elements or custom attributes. When you add <require from="select2/js/select2.min.js"></require> to your template aurelia loads the module and thinks it's the view-model for a custom element. It then attempts to load the view for it which is why you see the attempt to load .../select2.min.html

The "aurelia way" to integrate select2 would be to create a custom attribute that applies select2 to the element. Something like this:

select2-custom-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');
  }
}

Then you'd import the custom attribute into your view and use it like this:

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>

Or like this if you need to pass some options to select2 (this assumes your view-model has a property named "options" containing the select2 options as described in their docs):

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>

Here's a working example: https://gist.run/?id=0137059e029fc4b3ccd367e385f47b19

Unfortunately I was unable to import select2 properly using jspm, even when using the shim listed here . If you hit the same issue, you'll have to remove the import statements related to select2 from the custom attribute code above and load the select2 js and css with script/link tags in your document.

Answer 2

For the sake of completion, firing the change event in Jeremy's solution results in a recursive loop and causes exception to fix it I had to do:

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

I could then do:

<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) can be a function on your vm eg

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