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>
的 Select2。浏览器可以很好地加载缩小后的 JS 文件,但由于某种原因它也会尝试加载
http://localhost:3003/jspm_packages/github/select2/select2@4.0.0/js/select2.min.html。
为什么 Aurelia 试图加载我在 <require>
元素中指定的同一 JS 文件的 HTML 副本?我该如何解决这个问题?
谢谢
<require from="...."></require>
的目的是将视图资源导入您的视图。视图资源是自定义元素或自定义属性之类的东西。当您将 <require from="select2/js/select2.min.js"></require>
添加到模板时,aurelia 会加载模块并认为它是自定义元素的视图模型。然后它会尝试为其加载视图,这就是您看到尝试加载 .../select2.min.html
的原因
集成 select2 的 "aurelia way" 将创建一个将 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
不幸的是,我无法使用 jspm 正确导入 select2,即使使用列出的 shim here。如果您遇到同样的问题,您必须从上面的自定义属性代码中删除与 select2 相关的导入语句,并在您的文档中加载带有 script/link 标签的 select2 js 和 css。
为了完成,在 Jeremy 的解决方案中触发 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);
}
所以我正在尝试在我的 Aurelia 应用程序中使用 Select2。我使用 jspm install select2
安装了 Select2,在我的 app.html
文件中我需要使用 <require from="select2/js/select2.min.js"></require>
的 Select2。浏览器可以很好地加载缩小后的 JS 文件,但由于某种原因它也会尝试加载
http://localhost:3003/jspm_packages/github/select2/select2@4.0.0/js/select2.min.html。
为什么 Aurelia 试图加载我在 <require>
元素中指定的同一 JS 文件的 HTML 副本?我该如何解决这个问题?
谢谢
<require from="...."></require>
的目的是将视图资源导入您的视图。视图资源是自定义元素或自定义属性之类的东西。当您将 <require from="select2/js/select2.min.js"></require>
添加到模板时,aurelia 会加载模块并认为它是自定义元素的视图模型。然后它会尝试为其加载视图,这就是您看到尝试加载 .../select2.min.html
集成 select2 的 "aurelia way" 将创建一个将 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
不幸的是,我无法使用 jspm 正确导入 select2,即使使用列出的 shim here。如果您遇到同样的问题,您必须从上面的自定义属性代码中删除与 select2 相关的导入语句,并在您的文档中加载带有 script/link 标签的 select2 js 和 css。
为了完成,在 Jeremy 的解决方案中触发 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);
}