Aurelia 试图从 Select2 加载 HTML? [英] Aurelia trying to load HTML from Select2?

问题描述

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

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.

为什么 Aurelia 试图加载我在 <require> 元素中指定的同一个 JS 文件的 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?

谢谢

推荐答案

</require> 的目的是导入一个视图资源进入您的视野.视图资源是自定义元素或自定义属性之类的东西.当您将 <require from="select2/js/select2.min.js"></require> 添加到您的模板时，aurelia 会加载模块并认为它是自定义的视图模型元素.然后它会尝试为它加载视图，这就是为什么您会看到尝试加载 .../select2.min.html

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

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

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>

或者，如果您需要将一些选项传递给 select2(这假设您的视图模型有一个名为options"的属性，其中包含它们的文档中描述的 select2 选项):

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>

这是一个工作示例:https://gist.run/?id=0137059e029fc4b331859a>

不幸的是，我无法使用 jspm 正确导入 select2，即使使用列出的 shim 这里.如果遇到同样的问题，则必须从上面的自定义属性代码中删除与 select2 相关的导入语句，并在文档中加载带有 script/link 标记的 select2 js 和 css.

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.

这篇关于Aurelia 试图从 Select2 加载 HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！