Aurelia试图从Select2加载HTML？

Question

所以我试图在我的Aurelia应用程序中使用Select2.我安装了Select2 jspm install select2,在我的app.html文件中我需要使用Select2 <require from="select2/js/select2.min.js"></require>.浏览器加载缩小的JS文件,但由于某种原因它也尝试加载

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

为什么Aurelia试图加载我在<require>元素中指定的同一JS文件的HTML副本？我怎样才能解决这个问题？

谢谢

Answer 1

目的<require from="...."></require>是将视图资源导入视图.查看资源是自定义元素或自定义属性.当您添加<require from="select2/js/select2.min.js"></require>到模板时,aurelia会加载模块并认为它是自定义元素的视图模型.然后它尝试加载它的视图,这就是你看到加载尝试的原因.../select2.min.html

集成select2的"aurelia方式"是创建一个将select2应用于元素的自定义属性.像这样的东西:

选择2 - 定制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

不幸的是,我无法使用jspm正确导入select2,即使使用此处列出的垫片也是如此.如果遇到同样的问题,则必须从上面的自定义属性代码中删除与select2相关的import语句,并在文档中加载带有脚本/链接标记的select2 js和css.