2015-10-27 34 views
6

我的customAttribute有問題。我想用它來插入jquery-ui datepicker。從這裏取得的想法:http://www.danyow.net/jquery-ui-datepicker-with-aurelia/Aurelia customAttribute不能正常工作

但是看起來它根本不起作用。我試圖調試應用程序,它看起來像[email protected]沒有被解僱。但是,該文件本身正在從服務器請求。最糟糕的是,我是有工作的,昨天晚上,但今天上午...

我已經在我的骨架應用程序的創建叉簡單的例子:https://github.com/Exsilium122/skeleton-navigation ,使其準備好被克隆並運行故障排除。

最重要的兩個文件:


welcome.html

<template> 
    <require from="./resources/datepicker"></require> 
    <input id="myDate" datepicker="datepicker" value.bind="timestamp | dateFormat"/> 
</template> 

datepicker.js

import {inject, customAttribute} from 'aurelia-framework'; 
import 'jquery-ui'; 
import 'jquery-ui/themes/cupertino/jquery-ui.css!'; 

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

    attached =() => { 
     console.log("attached Datepicker"); 
     $(this.element).datepicker({ 
      dateFormat: 'mm/dd/yy' 
     }).on('change', e => fireEvent(e.target, 'input')); 

    } 

    detached =() => { 
     console.log("detached Datepicker"); 
     $(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); 
} 

和控制檯是乾淨的:

DEBUG [aurelia]正在載入插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]正在載入插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]加載插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38調試[aurelia]加載插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]正在載入插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/[email protected]。 aurelia-logging-console.js:38 DEBUG [aurelia]加載插件資源/索引。 aurelia-logging-console.js:38 DEBUG [aurelia]配置的插件資源/索引。 aurelia-logging-console.js:46信息[aurelia] Aurelia Started aurelia-logging-console.js:38 DEBUG [模板]導入http://localhost:9000/dist/app.html [「nav-bar.html」,「bootstrap/css/bootstrap」的資源。 css「] aurelia-logging-console.js:38調試[模板]導入資源http://localhost:9000/dist/nav-bar.html [] aurelia-logging-console。JS:38 DEBUG [模板]進口資源http://localhost:9000/dist/welcome.html [ 「http://localhost:9000/dist/resources/datepicker」]

回答

6

attached =() => {需要改變,以attached() {,如小膠質討論。

detached方法需要進行相應的更改。

這個問題可以關閉--OP在aurelia gitter中解決了問題。

3

只是做了:

  • 克隆從您的回購
  • NPM安裝JSPM
  • NPM安裝
  • jspm install -y

and guess wh在。它的工作原理:)

http://imagebin.ca/v/2KV4cFzITHtX

+0

btw。在windows上使用chrome版本46.0.2490.71 m – fops

+0

感謝您的努力。我一直在解決這個問題幾個小時,所以我已經將問題發佈到堆棧上,並嘗試了gitter。然後Jeremy Danyow幫助了我。我很高興,因爲我忘記了回去堆砌並解決問題。所以我很抱歉浪費你的時間。再次感謝您的努力。 它的工作原因是我糾正了錯誤並致力於回購。 –

+0

np ...很高興它工作:) – fops