javascript - Aurelia trying to load HTML from Select2? - Stack Overflow

admin管理员组

文章数量:1302342

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/[email protected]/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

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/[email protected]/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

• javascript
• jquery-select2
• aurelia
• jquery-select2-4

Share Improve this question Follow edited Jan 24, 2017 at 18:59 Robert Herhold asked Oct 31, 2015 at 14:20 Robert HerholdRobert Herhold 40455 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

For the sake of pletion, 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 e.g.

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

本文标签： javascriptAurelia trying to load HTML from Select2Stack Overflow