Question

我遇到customAttribute的问题。我想用它来插入jquery-ui datepicker。从这里获取的想法：http://www.danyow.net/jquery-ui-datepicker-with-aurelia/

然而，看起来它根本不起作用。我试图调试应用程序，看起来像attach@datePicker.js根本没有被解雇。但是，正在从服务器请求文件本身。最糟糕的是我昨天晚上工作了，但今天早上......

我在我的骨架应用程序分支中创建了一个简单的例子：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/templating-binding@0.16.1。 aurelia-logging-console.js：38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/templating-binding@0.16.1。 aurelia-logging-console.js：38 DEBUG [aurelia]加载插件http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.16.1。 aurelia-logging-console.js：38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.16.1。 aurelia-logging-console.js：38 DEBUG [aurelia]加载插件http://localhost:9000/jspm_packages/github/aurelia/history-browser@0.9.0。 aurelia-logging-console.js：38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/history-browser@0.9.0。 aurelia-logging-console.js：38 DEBUG [aurelia]加载插件http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.17.0。 aurelia-logging-console.js：38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.17.0。 aurelia-logging-console.js：38 DEBUG [aurelia]加载插件http://localhost:9000/jspm_packages/github/aurelia/event-aggregator@0.9.0。 aurelia-logging-console.js：38 DEBUG [aurelia]配置插件http://localhost:9000/jspm_packages/github/aurelia/event-aggregator@0.9.0。 aurelia-logging-console.js：38 DEBUG [aurelia]加载插件资源/索引。 aurelia-logging-console.js：38 DEBUG [aurelia]配置的插件资源/索引。 aurelia-logging-console.js：46 INFO [aurelia] Aurelia开始 aurelia-logging-console.js：38 DEBUG [模板]导入http://localhost:9000/dist/app.html的资源[“nav-bar.html”，“bootstrap / css / bootstrap.css”] aurelia-logging-console.js：38 DEBUG [模板]导入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”]

Answer 1

attached = () => {需要更改为attached() {，正如gitter中所述。

detached方法需要进行相应的更改。

这个问题可以被关闭 - OP在aurelia gitter中解决了问题。

Answer 2

刚做了一个：

从你的回购克隆
npm install jspm
npm install
jspm install -y

猜猜是什么。它有效：）

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

Aurelia customAttribute无法正常工作

2 个答案: