Question

我在我的Aurelia CLI应用程序中使用Bootstrap 3 Datepicker v4，它似乎在很大程度上只有一个怪癖。

这是我的代码：

import {Question} from "../../wizard/question";
import * as $ from 'jquery';
import * as datetimepicker from "eonasdan-bootstrap-datetimepicker";

export class DateTimePicker {
    associatedQuestion: Question;
    picker;   

    activate(model) {
        this.associatedQuestion = model;
    }

    attached() {
        console.log(datetimepicker);
        $(this.picker).datetimepicker();
    }
}

我的组件是html：

<template>
    <div>
        <!-- Label -->
        <label for.bind="associatedQuestion.id" innerhtml.bind="associatedQuestion.label"></label>

        <!-- Edit Display -->
        <div class="input-group date" ref="picker">
            <input type="text" class="form-control" id.bind="associatedQuestion.id" value.bind="myvalue" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>

        <!-- Review Display -->
        <div if.bind="associatedQuestion.displayMode == 'review'">
            ${associatedQuestion.value}
        </div>
    </div>
</template>

以下是此控件所需aurelia.json的摘录：

  {
    "name":"jquery",
    "path":"../node_modules/jquery/dist",
    "main":"jquery.min",
    "export": "$"
  },
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.min",
    "deps": ["jquery"],
    "resources": [
      "./css/bootstrap.css"
    ]
  },
  {
    "name": "eonasdan-bootstrap-datetimepicker",
    "path": "../bower_components/eonasdan-bootstrap-datetimepicker/build",
    "main": "js/bootstrap-datetimepicker.min",
    "resources": [
      "./css/bootstrap-datetimepicker.css"
    ]
  }

请注意代码中的 console.log(datetimepicker); 行。

如果没有这一行，我会收到错误：

Unhandled rejection TypeError: $(...).datetimepicker is not a function
    at DateTimePicker.attached (http://localhost:9000/scripts/app-bundle.js:591:28)
    at Controller.attached (http://localhost:9000/scripts/vendor-bundle.js:22088:24)
    .
    ..
    ...

我不确定我在这里遇到了什么。我预计我会遗漏一些简单的事情，或者只是做错了，但我很难过。

我还要注意，我的基础是this Github issue，我理解这可能是也可能不是处理这一年的首选方式。

Answer 1

我注意到在你的aurelia.json中，当正确的语法是"export": "$"时，你正在使用"exports": "$"，但我不认为它会改变任何东西。

尽管如此，您可以尝试以下方法：

尝试1

考虑到eonasdan-bootstrap-datetimepicker导出一个函数，这应该在理论上起作用：

attached() {
  datetimepicker($(this.picker)); //or maybe $(this.picker)[0];
}

尝试2

虽然eonasdan-bootstrap-datetimepicker支持模块化系统（显然），但bootstrap却不支持。处理引导程序和jquery插件的最简单方法是使用<script>标记或将它们附加到包中。所以，这肯定会奏效：

"prepend": [
  "node_modules/bluebird/js/browser/bluebird.core.js",
  "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
  "node_modules/jquery/dist/jquery.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
  "node_modules/requirejs/require.js"
]

然后，从dependencies中删除jquery，bootstrap和detepicker以及.ts文件中的所有import语句。

最后，使用jquery，bootstrap和datepicker作为全局函数：

attached() {
  $(this.picker).datetimepicker();
}

使用Aurelia CLI绑定第三方Bootstrap主题jQuery控件的异常行为

1 个答案: