如何以正确的方式使用Aurelia CLI和语义UI在Aurelia中包括和使用jQuery？

我们正在开发一个使用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>

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

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

感觉好像有什么东西没有按正确的顺序被激活。也许我们导入jQuery的方式不正确，或者我们没有正确地激活它。也许这是语义用户界面的问题

我将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="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>

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

在执行此操作时：

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

您需要在该元素中插入

TaskQueue

组件，并将其包装在

queueMicroTask

调用中，如下所示：

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

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

至于另一个问题：我很惊讶，在将jquery预先添加到供应商包时，您会在gulp方面出错。如果看不到您的完整的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>

下拉菜单
我的帐户
注销

---

这就是在点击时显示/隐藏的全部内容

非常感谢您的详细回答。这里有两个文件：@GeorgeP。在我看来很标准。您应该能够在

prepend

中将jquery文件添加到bluebird的正下方，而不会出现任何问题。你试过

queueMicroTask

吗？我的第一印象是queueMicroTask发挥了神奇的作用，解决了最初的问题！我会在接下来的几天里进行更多的测试。谢谢你的建议！不幸的是，queueMicroTask并没有解决问题，但我发现了问题的根源。整个下拉列表在一个div元素中，我将根据用户是否登录来显示它。所以我使用if.bind=“connector.isLoggedIn”，其中连接器被注入类，isLoggedIn是布尔值。在激活下拉列表（attached（））时，loggedIn的值为false。我认为它激活了元素，而元素当时并不存在。如果我将If.bind更改为“true”，则下拉列表可以正常工作。是的，我在我的示例中有点回避了这一点（我删除了

If.bind

，这是一个很好的理由），但我应该明确提到这一点。我的错。因此，为了澄清：您应该将

if.bind

更改为

show.bind

if.bind

完全从DOM中删除元素（从而断开其上的所有行为），而

show.bind

只是通过CSS隐藏它，它仍然可以工作。

<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>