Перетаскиваемый атрибут аурелии

Question

Перетаскиваемый атрибут аурелии

1

Я пытаюсь создать настраиваемый атрибут draggable с использованием aurelia и jquery-ui, однако я всегда получаю следующую ошибку:

Необработанное отклонение TypeError: $ (...). Draggable не является функцией

Я установил jquery и jquery-ui с помощью aurelia-cli (au install jquery и au install jquery-ui).

Вот моя попытка:

import { inject } from 'aurelia-framework';

import 'jquery';
import 'jquery-ui';

@inject(Element)
export class UiDraggableCustomAttribute {

    constructor(element) {
        this.element = element;
    }

    attached() {
        $(this.element).draggable();
    }
}

Кажется, что jquery-ui импортирован неправильно. Может ли кто-нибудь сказать мне, как правильно использовать jquery-ui с aurelia?

slepasteur 19 апр. 2017, в 16:13

Источник

0

Мы видим, что вы импортировали jquery-ui , однако из-за ошибки это не сработало. Проверьте правильность путей к соответствующим файлам JS и их успешную загрузку.
Rory McCrossan 19 апр. 2017, в 13:35
0

@RoryMcCrossan Я проверил, присутствует ли jquery-ui в каталоге packages.json, aurelia.json и каталоге node-modules. Однако я не уверен, как проверить, что они были загружены?
slepasteur 19 апр. 2017, в 13:44
0

Если вы используете Chrome, проверьте его на панели «Источники» консоли разработчика.
Rory McCrossan 19 апр. 2017, в 13:45
0

Можете ли вы попробовать import draggable from "jquery-ui"; ?
Tom 19 апр. 2017, в 14:40
0

Честно говоря, я рекомендую загружать jQuery и jQuery UI с помощью тегов скрипта или помещать их в раздел prepend пакета vendor-bundle если вы используете Jure AI CLIA. Затем они доступны по всему миру (как они были задуманы), и нам не нужно прибегать к их привязке к модулям ES2015 и надеяться, что они будут работать.
Ashley Grant 19 апр. 2017, в 15:26
0

@RoryMcCrossan Я просто вижу свои источники в src и app-bundle и vendor-bundle в скриптах.
slepasteur 19 апр. 2017, в 21:01
0

@thebluefox Я пытался, но результат тот же.
slepasteur 21 апр. 2017, в 11:48
0

@AshleyGrant Я пытался поместить jquery и jquery-ui в раздел prepend aurelia.json, но больше не могу скомпилировать. au build дает « File not found or not accessible: ...jquery.js » для каждого файла или зависимости, требующей jquery.
slepasteur 21 апр. 2017, в 11:56
0

Вы должны указать путь к файлу. Вы можете увидеть пример здесь: github.com/AshleyGrant/standard-aurelia-demo/blob/master/…
Ashley Grant 25 апр. 2017, в 15:05

Показать ещё 7 комментариев

Теги:

jquery

aurelia

jquery-ui

1 ответ

Ещё вопросы

Мы видим, что вы импортировали jquery-ui , однако из-за ошибки это не сработало. Проверьте правильность путей к соответствующим файлам JS и их успешную загрузку.
@RoryMcCrossan Я проверил, присутствует ли jquery-ui в каталоге packages.json, aurelia.json и каталоге node-modules. Однако я не уверен, как проверить, что они были загружены?
Если вы используете Chrome, проверьте его на панели «Источники» консоли разработчика.
Можете ли вы попробовать import draggable from "jquery-ui"; ?
Честно говоря, я рекомендую загружать jQuery и jQuery UI с помощью тегов скрипта или помещать их в раздел prepend пакета vendor-bundle если вы используете Jure AI CLIA. Затем они доступны по всему миру (как они были задуманы), и нам не нужно прибегать к их привязке к модулям ES2015 и надеяться, что они будут работать.
@RoryMcCrossan Я просто вижу свои источники в src и app-bundle и vendor-bundle в скриптах.
@thebluefox Я пытался, но результат тот же.
@AshleyGrant Я пытался поместить jquery и jquery-ui в раздел prepend aurelia.json, но больше не могу скомпилировать. au build дает « File not found or not accessible: ...jquery.js » для каждого файла или зависимости, требующей jquery.
Вы должны указать путь к файлу. Вы можете увидеть пример здесь: github.com/AshleyGrant/standard-aurelia-demo/blob/master/…

slepasteur · Accepted Answer · 2017-04-27T06-28-00.000Z

Мне удалось выполнить эту работу с помощью jQuery-ui версии 1.10.5, я не мог понять, как использовать более новую версию пакета jquery-ui npm.

import { inject } from 'aurelia-framework';

import 'jquery';
import { draggable } from 'jquery-ui';

@inject(Element)
export class DraggableCustomAttribute {

    constructor(element) {
        this.element = element;
    }

    attached() {
        $(this.element).draggable();
    }
}