Aurelia 试图从 Select2 加载 HTML？

Posted 2023-05-07

【中文标题】Aurelia 试图从 Select2 加载 HTML？

【英文标题】：Aurelia trying to load HTML from Select2?

【发布时间】：2016-01-31 20:39:45

【问题描述】：

所以我尝试在我的 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 副本？我该如何解决这个问题？

谢谢

【参考方案1】：

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

集成 select2 的“aurelia 方式”是创建一个将 select2 应用于元素的自定义属性。像这样的：

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');
  

然后您将自定义属性导入您的视图并像这样使用它：

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 事件？我试过：<select select2 value.bind="selectedState" change.delegate="chnageCallback($event)" 但我得到Maximum call stack size exceeded 错误

您无法将select2 用作导入的原因是您需要将! 放在css 导入的末尾，如下所示：import * as $ from 'jquery'; import 'select2'; import 'select2/css/select2.min.css!';

【参考方案2】：

为了完成，在 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);

【讨论】：

当我动态更改 selectedState 时，视图不会更新，我会在 dispatchEvent 行之后添加它： setTimeout(() => $(this.element).change() ; , 0);