我在我的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) . .. ...我不确定我在这里遇到了什么。 我预计我会遗漏一些简单的事情，或者只是简单地做错了，但我很难过。
我还要注意，我基于这个Github问题 ，我理解这可能是也可能不是处理这一年的首选方式。
I'm using the Bootstrap 3 Datepicker v4 in my Aurelia CLI app and it seems to be working for the most part with one quirk.
Here is my code:
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(); } }And my component's 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>And here's an excerpt from my aurelia.json required for this control:
{ "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" ] }Note the line console.log(datetimepicker); in the code.
Without this line I receive the error:
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) . .. ...I'm unsure what I'm experiencing here. I anticipate I'm missing something simple or just plain doing it wrong, but I'm stumped.
I'd also like to note that I'm basing this off of this Github issue which I understand may or may not be the preferred way to handle this one year on.
最满意答案
我注意到在你的aurelia.json中你正在使用"export": "$"当正确的语法是"exports": "$" ，但我不认为它会改变任何东西。
不过，这里有一些你可以试试的东西：
尝试1
考虑到eonasdan-bootstrap-datetimepicker导出一个函数，这应该在理论上起作用：
attached() { datetimepicker($(this.picker)); //or maybe $(this.picker)[0]; }尝试2
虽然eonasdan-bootstrap-datetimepicker支持模块化系统（显然），但bootstrap不支持。 处理引导程序和jquery插件的最简单方法是使用<script>标记或将它们附加到bundle中。 所以，这肯定会奏效：
"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及其.ts文件中的所有import语句中删除jquery，bootstrap和detepicker。
最后，使用jquery，bootstrap和datepicker作为全局函数：
attached() { $(this.picker).datetimepicker(); }I've noticed that in your aurelia.json you're using "export": "$" when the correct syntax is "exports": "$", but I don't think it will change anything.
Nevertheless, here are some things you can try:
Attempt 1
Considering that eonasdan-bootstrap-datetimepicker exports a function, this should work in theory:
attached() { datetimepicker($(this.picker)); //or maybe $(this.picker)[0]; }Attempt 2
Although eonasdan-bootstrap-datetimepicker supports modular systems (apparently), bootstrap doesn't. The easiest way to handle bootstrap and jquery plugins is using <script> tags or appending them into the bundle. So, this will certainly work:
"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" ]Afterwards, remove jquery, bootstrap and detepicker from dependencies and all their import statements from .ts files.
Finally, use jquery, bootstrap and datepicker as global functions:
attached() { $(this.picker).datetimepicker(); }更多推荐
发布评论