如何在Aurelia入门应用程序(导航应用程序)中使用JQuery UI组件 [英] How to use JQuery UI components in Aurelia getting started app (navigation app)

问题描述

我可以按照入门教程中提供的步骤来运行Aurelia应用程序.他们在框架应用程序中使用了引导程序nav-bar.是否可以在Aurelia应用程序中使用JQuery UI组件.如果是，请向我解释如何实现此目标.

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.

谢谢.

推荐答案

是的，有可能！

我为您制作了一个jQueryUI Tabs 示例:

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>

如您所见，我只复制了jQueryUI Tabs组件的样板HTML，并创建了可绑定属性tabs，它是一个像这样的对象数组:[{title: "", text: ""}].

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();
  }
}

代码可读性强:我从config.js文件中导入了jquery，从那里也导入了jquery-ui(仅导入了组件选项卡，因此它变得更轻便).然后，将DOMElement注入到我的类中，这样我就可以获取它的ID.我已经创建了可绑定属性tabs.在构造函数中，获取DOMElement id并填充id属性.最后，在附加的事件上(当所有绑定完成时)，我从ID中获得了jQuery对象，并调用了tabs()方法将模板转换为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文件中，添加了这两行:

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",

然后，您可以通过在项目的任何其他HTML模板中调用Tabs组件，在任意位置使用它:

And then you can use the Tabs component wherever you want, by calling it in any other HTML template of your project:

就是这样！

您可以在此处看到工作示例: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG? p =预览

You can see the working example here: http://plnkr.co/edit/ESxZA2jTlN7f6aiq1ixG?p=preview

PS:感谢西尔维安·普拉恩克(Pylr)，我用你的叉子叉了我的东西.

PS: Thanks for that plnkr, Sylvian, I've used yours to fork mine.

这篇关于如何在Aurelia入门应用程序(导航应用程序)中使用JQuery UI组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！