Как использовать компоненты пользовательского интерфейса JQuery в приложении Aurelia для начинающих (приложение для навигации)

Question

Я могу запустить приложение Aurelia, следуя инструкциям, приведенным в руководстве по началу работы. Они использовали загрузочную навигационную панель в скелетном приложении. Можно ли использовать компоненты пользовательского интерфейса JQuery в приложении Aurelia. Если да, пожалуйста, объясните мне, как этого добиться.

Заранее спасибо.

Answer 1

Да, это возможно!

Я сделал для вас пример 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>

Как вы можете видеть, я только скопировал шаблонный HTML-код компонента jQueryUI Tabs и создал свойство bindable tabsкоторый является массивом таких объектов: [{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();
  }
}

Код довольно удобен для чтения: я импортировал jquery из моего файла config.js, а также мой jquery-ui (только вкладки компонентов, поэтому он становится светлее). Затем я вставил элемент DOME в свой класс, чтобы я мог получить его идентификатор. Я создал свою привязываемую собственность tabs, В моем конструкторе я получаю идентификатор DOMElement и заполняю свое свойство id. И, наконец, в прикрепленном событии (когда все привязки завершены), я получил объект jQuery из моего идентификатора и вызвал метод 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=preview

PS: спасибо за этот plnkr, Сильвиан, я использовал ваш, чтобы раскошелиться.

Answer 2

Вы можете import и затем используйте jquery для ваших элементов DOM.

Учитывая это template названный test.html:

<template>
  <div ref="content">test</div>
</template>

Test пользовательский элемент может манипулировать div упоминается как content как это:

import {customElement, inject} from 'aurelia-framework';
import $ from 'jquery';

@customElement('test')
export class Test{

  attached(){
    $(this.content).css('color', 'red');
  }
}

Затем вы можете использовать этот пользовательский элемент в любом представлении, используя <test></test> тег.

Этот пример использует css() функции, но вы можете импортировать любой плагин и применять их к своим элементам.

Смотрите рабочий пример здесь: http://plnkr.co/edit/SEB4NK?p=preview ( наберитесь терпения, для загрузки потребуется немного времени).