在 aurelia 应用程序中使用引导程序（主题）javascript答案

【问题标题】：Using bootstrap (theme) javascript in aurelia app在 aurelia 应用程序中使用引导程序（主题）javascript
【发布时间】：2015-12-13 12:24:00
【问题描述】：

我正在尝试在 aurelia 应用中使用引导主题，但在引导 JavaScript 组件方面遇到了一些问题。

我在 aurelias index.html 中包含了 bootstrap 主题所需的所有资源，因此所有 JavaScript 都应该就位。

问题：

即有些组件使用a 标记的href 属性来引用相应的dom 元素以进行某些切换操作，而aurelia 正试图导航到该href 的路线。（对于引导选项卡导航，一种解决方法可能是使用 aurelias childrouter。）

不幸的是，我也没有在 aurelia 应用程序中使用简单的引导模式。这是来自引导文档的简单复制和粘贴，应该可以正常工作，但是当我单击 Show modal 按钮时没有任何反应。

如何在 aurelia 中使用 bootstrap 的 JavaScript 组件？有什么办法让它工作吗？

【问题讨论】：

【解决方案1】：

看看PWKad's Aurelia Bootstrap Modal。

如果您想让 Bootstrap 的任何 javascript 组件在 Aurelia 中工作，您必须了解它们的工作原理，并且您需要在 attached 事件中手动调用所需的方法。

可以在plnkr 中看到在 Aurelia 中工作的简单 Bootstrap Modal，没有特殊功能。

【讨论】：

我刚刚看到了 Plnkr。有什么方法可以捕获 Aurelia VM 中的 #modal 事件？比如 $('#modal').on('shown.bs.modal', function () {...}

【解决方案2】：

我只是在回答问题的最后一句话。

我会看一下 Aurelia 文档，特别是 Rob Eisenberg 的 Contact Manager 教程：

这将为您提供如何设置 Aurelia 以使用 Jquery/Bootstrap 的示例，但您需要使用 aurelia-cli 来设置您的项目。教程将引导您完成。

然后您需要将信息添加到 project/aurelia_project/aurelia.json（由 aurelia-cli 创建），以便框架知道如何使用 Bootstrap/Jquery。这也在教程中。

我已经能够简单地（如教程中所做的那样）：

    <require from="bootstrap/css/bootstrap.css"></require>

在 src/app.html 中，从 Bootstrap 组件网站复制/粘贴一个下拉菜单，它就成功了！

但是，有些东西没有，比如 Button with Popup（Popup 没有弹出），或者 Large Modal。模态确实有效，只是没有显示标题。

可能是我缺少的东西，但我很高兴让下拉菜单正常工作！

【讨论】：