Bootstrap-Aurelia 中的工具提示

Question

我需要在 aurelia 框架中使用 bootstrap-tooltip。为此，我创建了一个 BootstrapTooltip 属性 class.

import {customAttribute, inject} from "aurelia-framework";
import $ from "bootstrap";

@customAttribute("bootstrap-tooltip")
@inject(Element)
export class BootstrapTooltip {
    constructor(element) {
        this.element = element;
    }

    bind() {
        $(this.element).tooltip();
    }

    unbind() {
        $(this.element).tooltip("destroy");
    }
}

这是当前代码。但是我收到错误 "Bootstrap_1.default is not a function"

可能是$的原因，但不知道是什么原因...

Answer 1

查看 aurelia.json 文件中的依赖项并检查您是否在依赖项中设置 bootstrap 以依赖于 jquery.

{
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": [ "jquery" ],
    "exports": "$"
}

这应该扩展全局 jquery 对象“$”以具有 bootstrap 功能，包括工具提示。

最后从 "bootstrap" 中删除导入 $，因为您正尝试从 bootstrap 导入 $，当它已经全局定义时，这可能会导致问题。

Bootstrap-Aurelia 中的工具提示

Bootstrap-tooltip in Aurelia

twitter-bootstrap

typescript

twitter-bootstrap-tooltip

aurelia