Aurelia找不到jQuery UI組件

我已經在下面發佈瞭解決方案。我很樂意提供如何改善的建議，所以請不要猶豫，建議更好的方法！Aurelia找不到jQuery UI組件

我爲我的網絡應用程序使用Aurelia CLI。我試圖使用jQuery標籤和jQuery日期選擇器，但沒有任何工程

我得在GitHub上here演示，所有你需要做的就是克隆，然後運行

npm install; au run

我使用在這個StackOverflow的問題How to use JQuery UI components in Aurelia getting started app (navigation app)

提供如果您在的src /路由/標籤看起來不是那麼的例子你會看到我，包括我，包括jQuery的使用

import $ from 'jquery'; 
import {tabs} from 'jquery-ui';

在我aurelia.json，我包括jQuery的和 jQuery的的UI通過線

"dependencies": [ 
    "jquery", 
    "jquery-ui" 
]

如果我改變了進口

"jquery", 
{ 
    "name": "jquery-ui", 
    "path": "../node_modules/jquery-ui", 
    "main": "jquery-ui" 
    "deps": ["jquery"], 
    "exports": "$" 
}

我還是沒有錯誤。該代碼只是無所作爲。

我懷疑根本原因是配置問題，但任何幫助將超級讚賞！

來源

2017-01-10 Kearney Taaffe

你在'「main」：「jquery-ui」'後面缺少一個逗號。也許就是這樣？ – LStarky

哦，對不起，這是一個複製粘貼錯誤:-( 如果你錯過了一個逗號，或者添加一個額外的comman，'au'命令會吹一堆錯誤 –

請看我的答案在這裏：http：// stackoverflow .COM /問題/ 40837505 /如何使用的，jQuery的UI與 - 奧裏利亞 –

下面是我所做的解決問題。

修改aurelia/aurelia.json包含jquery。然後，加載你想要的jquery-ui插件，並將jquery作爲依賴項。此外，在CSS負載它

"jquery", 
{ 
    "name": "jquery-ui-datepicker", 
    "path": "../node_modules/jquery-ui/", 
    "main": "ui/widgets/datepicker", 
    "dep": ["jquery"], 
    "exports": "$", 
    "resources": [ 
    "themes/base/datepicker.css", 
    "themes/base/theme.css" 
    ] 
}

然後在我看來，我不得不添加該代碼

<!-- the view.html --> 
<input datepicker value.bind="dateSelected"> 
<script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    }); 
</script>

然後，我不得不用customAttribute偵聽jQuery的的onchange（）事件

<!-- the view.html --> 
<require from="./datepicker"></require>

監聽jQuery的平變化的代碼（）事件

// datepicker.js 
import {inject, customAttribute} from 'aurelia-framework'; 

@customAttribute('datepicker') 
@inject(Element) 
export class DatePicker { 
    constructor(element) { 
    this.element = element; 
    } 

    attached() { 
    $(this.element).datepicker() 
     .on('change', e => fireEvent(e.target, 'input')); 

    } 

    detached() { 
    $(this.element).datepicker('destroy') 
     .off('change'); 
    } 
} 

function createEvent(name) { 
    var event = document.createEvent('Event'); 
    event.initEvent(name, true, true); 
    return event; 
} 

function fireEvent(element, name) { 
    var event = createEvent(name); 
    element.dispatchEvent(event); 
}

這是github解決方案的link。如果有更好的方法去做，我願意接受建議。

來源

2017-01-10 10:38:31

Aurelia找不到jQuery UI組件

回答

相關問題