aurelia - 如何将 bootstrap-datepicker 实现为 Aurelia 自定义元素

Question

首先阅读此文http://www.danyow.net/jquery-ui-datepicker-with-aurelia/灵感来自https://gist.github.com/charlespockert/6a1fef3f546f6d37d1dc以下是我尝试实现 https://github.com/eternicode/bootstrap-datepicker引导日期选择器的版本:

http://plnkr.co/edit/TkbT6E?p=preview

我得到self.datePicker.datepicker is not a function(…)尽管我已经检查 bootstrap-datepicker 是否已与 jspm 一起正确安装并且 .js 已加载。日期选择器确实出现了(这确认了js已正确加载)，我可以选择一个日期，但该值尚未设置。

我在这里做错了什么？

更新:

一个友好的灵魂，@SamDeBlock，在 gitter.im/Aurelia 中整理了这个 http://plnkr.co/edit/hKit8pigwL1ijr2DmbGP?p=preview与依赖项，所以它会运行。然而，当我在自己的应用程序中运行它时，我不断收到上述错误。如果我弄清了这个问题的真相，我将进一步调查这个问题并在此处更新。

更新2:

我现在已将问题归结为 system.js/jspm 的问题。这也是上面的 plunkr 起作用的原因，因为它只是直接引用文件，而不是在 config.js 中定义它们。

如果我像上面的 plunkr 中建议的那样手动添加文件 - 并且如果我在 moment.js 文件中更改以下内容:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    global.moment = factory()
}(this, function () { 'use strict';
...

至:

(function (global = typeof window !== "undefined" ? window : this, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    global.moment = factory()
}(this, function () { 'use strict';
...

global = typeof window !== "undefined" ? window : this部分..

那么它似乎也可以与 Aurelia 导航框架一起使用。

但是为什么这是必要的呢？我怎样才能让它工作，而不需要所有的技巧？我已经在 Aurelia Navigation Starter 项目上构建了我的应用程序 https://github.com/aurelia/skeleton-navigation

Answer 1

很可能是 jspm 在执行 jspm install -y npm:bootstrap-datepicker 时造成的所以检查config.js

寻找这个:

"npm:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2808d8d969196908392cf86839687928b81898790a2d3ccd7ccd2" rel="noreferrer noopener nofollow">[email protected]</a>": {
  "fs": "github:jspm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda3a2a9a8a1a4afbee0abbe8dfde3fce3ff" rel="noreferrer noopener nofollow">[email protected]</a>",
  "jquery": "npm:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f993888c9c8b80b9cbd7c8d7cd" rel="noreferrer noopener nofollow">[email protected]</a>"
},

并将其更改为:

"npm:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e4e4fff8fff9eafba6efeaffeefbe2e8e0eef9cbbaa5bea5bb" rel="noreferrer noopener nofollow">[email protected]</a>": {
  "fs": "github:jspm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb1b0bbbab3b6bdacf2b9ac9feff1eef1ed" rel="noreferrer noopener nofollow">[email protected]</a>",
  "jquery": "github:components/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1cbd0d4c4d3d8e1938f908f95" rel="noreferrer noopener nofollow">[email protected]</a>"
},

重要的部分是:"jquery": "github:components/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b2a9adbdaaa198eaf6e9f6ec" rel="noreferrer noopener nofollow">[email protected]</a>"

然后一切都应该通过 System.config 进行，而不需要 moment.js 解决方法或其他任何东西。

http://plnkr.co/edit/OeVeiLXwfpTlorDZjBQe?p=preview