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

Question

我们正在使用 Aurelia、Aurelia CLI、jQuery 和 Semantic 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();
  }

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

感觉有些东西被激活的顺序不对。也许我们没有以正确的方式导入 jQuery 或者我们没有正确激活它。可能是 Semantic 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">

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

{ 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 调用之前完全呈现所有内容。这通常是与第 3 方 UI 组件集成的推荐方式。

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

没有jquery

最后，您可能需要考虑 而不是 使用 jQuery / jQuery UI 或语义 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>

这就是点击 show/hide 制作内容的全部内容！

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

How to include and use jQuery in Aurelia using Aurelia CLI and Semantic UI in a right way?

jquery

semantic-ui

aurelia

没有jquery