我可以按照入门教程中提供的步骤运行Aurelia应用程序.他们在骨架应用程序中使用了bootstrap nav-bar.可以在Aurelia应用程序中使用
JQuery UI组件.如果是,请说明如何实现这一点.
提前致谢.
解决方法
是的,这是可能的！
我为您制作了一个jQueryUI Tabs示例：
tabs.html
<template>
<ul>
<li repeat.for="tab of tabs">
<a href="${'#' + $parent.id + '-' + $index}">${tab.title}</a>
</li>
</ul>
<div repeat.for="tab of tabs" id="${$parent.id + '-' + $index}">
<p>${tab.text}</p>
</div>
</template>
如您所见,我只复制了jQueryUI Tabs组件的样板HTML,并创建了一个可绑定的属性选项卡,它是一个像这样的对象数组：[{title：“”,text：“”}].
tabs.js
import {bindable,inject} from 'aurelia-framework';
import $from 'jquery';
import {tabs} from 'jquery-ui';
@inject(Element)
export class Tab {
@bindable tabs = null;
constructor(el) {
this.id = el.id;
}
attached() {
$(`#${this.id}`).tabs();
}
}
代码很可读：我已经从我的config.js文件导入了jquery,并且我的jquery-ui也从那里(只有组件选项卡,所以它变轻).然后,我将DOMElement注入到我的课堂,所以我可以得到它的id.我创建了我的可绑定属性选项卡.在我的构造函数中,我得到了DOMElement id并填充了我的id属性.最后,在附加的事件(当所有绑定完成时),我从我的id获取了jQuery对象,并调用了方法tabs()将模板转换为Tabs组件.很简单啊
"jquery": "github:components/jquery@2.1.4","jquery-ui": "github:components/jqueryui@1.11.4",
然后,您可以使用Tabs组件,无论您想要什么,通过在项目的任何其他HTML模板中调用它们：
而已！
你可以看到这里的工作示例：http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview
PS: Thanks for that plnkr,Sylvian,I’ve used yours to fork mine.
