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();
  }

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

感觉就像是，某些事情正在以正确的顺序被激活。也许我们不是以正确的方式导入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调用之前完全呈现所有内容。它通常是与第三方UI组件集成的推荐方式。

至于另一个问题：当你将jquery添加到你的供应商包中时，我很惊讶你得到一个关于gulp的错误。如果没有看到完整 aurelia.json（可能还有package.json），这些问题很难排除。

没有jquery

最后，你可能想要使用jQuery / jQuery UI或Semantic UI的javascript来考虑 not 。我个人只使用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>

这就是点击一下显示/隐藏的东西！

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

1 个答案:

没有jquery