在Aurelia中使用jQuery
我有一个Aurelia应用程序,在app.js我想使用jQuery。
所以我的config.js看起来像:
System.config({ ... map: { ... "jquery": "npm:jquery@2.2.0", ... } }
在app.js我导入jQuery像这样:
var $ = require('jquery');
但是当我需要它时,我得到了空白网站。 与导入相同:
import $ from 'jquery';
怎么了?
谢谢
编辑:好的,解决了。 问题是,jQuery代码必须在附加的()方法中调用。 像这样:
export class Class1 { attached() { //jQuery code here } }
您需要从https://github.com/components/jquery安装jquery
但是如果你使用aurelia-skeleton,你可以从bootstrap
导入它
import 'bootstrap';
然后在app中使用$
,或者
import $ from 'bootstrap'
同样适用于jqueryui。 如果需要,请从https://github.com/components/jqueryui获取
只是为了与众不同! 我们使用jQuery,我尝试通过config.js添加它并使用导入等 – 这工作正常。 但是我们还使用了几个js库,我们在主html页面中使用脚本标记加载这些库,这些库需要jquery。 我尝试使用import加载它们但是它们并不是真的为它设计而且它太复杂了所以最后我们只是让生活变得非常简单:
主html页面中jquery的脚本标记
主html页面中来自第三方js库的脚本标记
任务完成!
如果您愿意,它还具有从CDN加载jquery和库的潜在好处。
也许失去了通过导入加载模块的好处,但我们在整个应用程序中同时使用了jquery和其他库,所以我们并没有真正失去加上我不必记得在创建新模块时导入它们:-)
jquery安装在\ jspm_packages \ github \ components中(至少在我的例子中)。 如果是这种情况你应该使用:
System.config({ ... map: { ... "jquery": "github:components/jquery@2.2.0", ... } }
链接到plunker中的示例 。