javascript 如何在 Aurelia 入门应用（导航应用）中使用 JQuery UI 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31176580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use JQuery UI components in Aurelia getting started app (navigation app)
提问by Hari Krishnan
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.
我可以按照入门教程中提供的步骤运行 Aurelia 应用程序。他们在骨架应用程序中使用了引导程序导航栏。是否可以在 Aurelia 应用程序中使用 JQuery UI 组件。如果是，请向我解释如何实现这一目标。
Thanks in advance.
提前致谢。
回答by Buzinas
Yes, it's possible!
是的，这是可能的！
I've made a jQueryUI Tabsexample for you:
我为您制作了一个 jQueryUI Tabs示例：
tabs.html
标签页.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: ""}].
正如你所看到的，我只复制jQueryUI的标签组成的样板HTML，并创建了绑定属性tabs是这样的对象数组：[{title: "", text: ""}]。
tabs.js
选项卡.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?
代码非常易读：我已经从我的 config.js 文件中导入了 jquery，我的 jquery-ui 也是从那里导入的（只有组件选项卡，所以它变得更轻了）。然后，我将 DOMElement 注入到我的类中，这样我就可以得到它的 id。我已经创建了我的可绑定属性tabs。在我的构造函数中，我获取 DOMElement id 并填充我的 id 属性。最后，在附加事件上（当所有绑定完成时），我从我的 id 中获取了 jQuery 对象，并调用了tabs()将模板转换为 Tabs 组件的方法。很简单吧？
In my config.js file, I've added those two lines:
在我的 config.js 文件中，我添加了这两行：
"jquery": "github:components/[email protected]",
"jquery-ui": "github:components/[email protected]",
And then you can use the Tabs component wherever you want, by calling it in any other HTML template of your project:
然后你可以在任何你想要的地方使用 Tabs 组件，通过在项目的任何其他 HTML 模板中调用它：
That's it!
而已！
You can see the working example here: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview
您可以在此处查看工作示例：http: //plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview
PS: Thanks for that plnkr, Sylvian, I've used yours to fork mine.
PS：谢谢你的 plnkr，Sylvian，我用你的来分叉我的。
回答by Sylvain
You can importand then use jquery on your DOM elements.
您可以import然后在 DOM 元素上使用 jquery。
Given this templatenamed test.html:
鉴于此template命名test.html：
<template>
<div ref="content">test</div>
</template>
A Testcustom element can manipulate the divreferenced as contentlike this:
一个Test自定义元素可以操纵div引用为content这样的：
import {customElement, inject} from 'aurelia-framework';
import $ from 'jquery';
@customElement('test')
export class Test{
attached(){
$(this.content).css('color', 'red');
}
}
Then you can use that custom element in any view using the <test></test>tag.
然后，您可以使用该<test></test>标签在任何视图中使用该自定义元素。
This exemple uses the css()function but you can import any plug-in and apply them to your elements.
本示例使用该css()功能，但您可以导入任何插件并将它们应用到您的元素。
See a working example here: http://plnkr.co/edit/SEB4NK?p=preview(be patient it takes a little while to load).
在此处查看一个工作示例：http: //plnkr.co/edit/SEB4NK?p=preview（请耐心等待加载需要一些时间）。
