如何在 Aurelia 入门应用(导航应用)中使用 JQuery UI 组件 [英] How to use JQuery UI components in Aurelia getting started app (navigation app)
问题描述
我可以按照入门教程中提供的步骤运行 Aurelia 应用程序.他们在骨架应用程序中使用了引导程序导航栏.是否可以在 Aurelia 应用程序中使用 JQuery UI 组件.如果是，请向我解释如何实现这一点.
提前致谢.
是的，这是可能的！
我为您制作了一个 jQueryUI Tabs 示例:
tabs.html
<ul><li repeat.for="tab of tabs"><a href="${'#' + $parent.id + '-' + $index}">${tab.title}</a><div repeat.for="tab of tabs" id="${$parent.id + '-' + $index}"><p>${tab.text}</p>如您所见，我只复制了 jQueryUI Tabs 组件的样板 HTML，并创建了可绑定属性 tabs，它是一个对象数组，如下所示:[{title:"", text: ""}].
tabs.js
import {bindable, inject} from 'aurelia-framework';从'jquery'导入$；从'jquery-ui'导入{tabs}；@inject(元素)导出类 Tab {@bindable tabs = null;构造函数(el){this.id = el.id;}随附的() {$(`#${this.id}`).tabs();}}代码非常易读:我已经从我的 config.js 文件中导入了 jquery，我的 jquery-ui 也是从那里导入的(只有组件选项卡，所以它变得更轻了).然后，我将 DOMElement 注入到我的类中，这样我就可以得到它的 id.我已经创建了我的可绑定属性 tabs.在我的构造函数中，我获取 DOMElement id 并填充我的 id 属性.最后，在附加事件上(当所有绑定完成时)，我从我的 id 中获取了 jQuery 对象，并调用了方法 tabs() 将模板转换为 Tabs 组件.很简单吧?
在我的 config.js 文件中，我添加了这两行:
"jquery": "github:components/jquery@2.1.4","jquery-ui": "github:components/jqueryui@1.11.4",然后您可以在任何地方使用 Tabs 组件，方法是在项目的任何其他 HTML 模板中调用它:
就是这样！
您可以在此处查看工作示例:http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=预览
<块引用>PS:谢谢你的 plnkr，Sylvian，我已经用你的来分叉我的了.
I am able to run the Aurelia app by following the steps provided in getting started tutorial. They have used bootstrap nav-bar in the skeleton application. Is it possible to use JQuery UI components in the Aurelia app. If yes, please explain me how to achieve this.
Thanks in advance.
Yes, it's possible!
I've made a jQueryUI Tabs example for you:
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>
As you can see, I've only copied the boilerplate HTML of the jQueryUI Tabs component, and created the bindable property tabswhich is an Array of Objects like that: [{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();
}
}
The code is pretty readable: I've imported jquery from my config.js file, and my jquery-ui from there too (only the component tabs, so it gets lighter). Then, I've injected the DOMElement to my class, so I could get it's id. I've created my bindable property tabs. In my constructor, I get the DOMElement id and populates my id property. And, finally, on the attached event (when all the binds are finished), I've got the jQuery object from my id, and called the method tabs() to turn the template into a Tabs component. Pretty simple, uh?
In my config.js file, I've added those two lines:
"jquery": "github:components/jquery@2.1.4",
"jquery-ui": "github:components/jqueryui@1.11.4",
And then you can use the Tabs component wherever you want, by calling it in any other HTML template of your project:
That's it!
You can see the working example here: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview
PS: Thanks for that plnkr, Sylvian, I've used yours to fork mine.
这篇关于如何在 Aurelia 入门应用(导航应用)中使用 JQuery UI 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
