如何以正确的方式使用 Aurelia CLI 和 Semantic UI 在 Aurelia 中包含和使用 jQuery？

Question

我们正在开发一个使用 Aurelia、Aurelia CLI、jQuery 和语义 UI 的项目。

目前，我们在index.html 的头部部分包含以下几行：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

我们有一个导航栏，其中一个元素是 Semantic UI 提供的下拉菜单：

  <div id="navbar_account" class="ui dropdown item navbar text" if.bind="connector.loggedIn">
    Dropdown menu
    <i class="left dropdown icon"></i>
    <div class="menu">
      <a class="item" click.delegate="">My account</a>
      <a class="item" click.delegate="">Logout</a>
    </div>
  </div>

为了使其可用，我们将此代码添加到相应的 js 文件中：

  attached() {
    $('.ui.dropdown').dropdown();
  }

问题是，第一次打开网站或页面时，此代码似乎不起作用。只有当我们点击其他导航栏链接时，这个下拉菜单才会开始起作用。

感觉好像有什么东西没有按正确的顺序被激活。也许我们没有以正确的方式导入 jQuery，或者我们没有正确激活它。可能是语义 UI 的问题。

我所有尝试将 jQuery 添加为依赖项或作为 Aurelia CLI 投影仪 (aurelia.json) 的前导都没有成功。

在最近的一次试验中，我运行：

npm install jquery --save
npm install github:components/jqueryui#1.12.1 --save

添加到aurelia.json:

        "prepend": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/components-jqueryui/jquery-ui.min.js",
           ...

添加到index.html:

<link rel="stylesheet" href="node_modules/components-jqueryui/themes/base/all.css">

通过这些步骤，我使用 au run –watch 使 Aurelia 项目不再可运行

{ Error: Cannot find module 'gulp'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Promise (D:\gitkraken\ad\aurelia\node_modules\aurelia-cli\lib\commands\gulp.js:19:20)
    at new Promise (<anonymous>)
    at module.exports.execute (D:\gitkraken\ad\aurelia\node_modules\aurelia-cli\lib\commands\gulp.js:18:12)
    at _establishProject.then.then (D:\gitkraken\ad\aurelia\node_modules\aurelia-cli\lib\cli.js:36:24)
    at <anonymous> code: 'MODULE_NOT_FOUND' }

Answer 1

您在哪里执行此操作：

attached() {
  $('.ui.dropdown').dropdown();
}

您需要在该元素中注入 TaskQueue 组件并将其包装在 queueMicroTask 调用中，如下所示：

attached() {
  this.taskQueue.queueMicroTask(() => {
    $('.ui.dropdown').dropdown();
  });
}

这可确保在 jQuery 调用之前所有内容都已完全呈现。这通常是与 3rd 方 UI 组件集成的推荐方式。

至于另一个问题：当您将 jquery 附加到您的供应商捆绑包时，我很惊讶您收到有关 gulp 的错误。如果不查看您的 complete aurelia.json（可能还有 package.json），这些问题很难解决。

没有 jquery

最后，您可能需要考虑不使用 jQuery / jQuery UI 或 Semantic UI 的 javascript。我个人只使用 CSS 并自己使用 Aurelia 构建组件行为，因为 Aurelia 使委托和绑定变得如此简单。

我强烈建议您尝试一下。它会让你更好地使用 HTML/CSS/JavaScript/Aurelia，你会得到更高质量的项目 + 可以跨项目重用的东西。另外，永远不需要拖入那些有问题的依赖项。

例子：

<div id="navbar_account" class="ui dropdown item navbar text">
  Dropdown menu
  <i class="left dropdown icon" click.delegate="showDropdown = !showDropdown"></i>
  <div class="menu" show.bind="showDropdown">
    <a class="item">My account</a>
    <a class="item">Logout</a>
  </div>
</div>

这就是让某些东西在点击时显示/隐藏的全部内容！