Aurelia customAttribute 不工作
Aurelia customAttribute not working
我对 customAttribute 有疑问。我想用它来插入 jquery-ui 日期选择器。想法取自这里:http://www.danyow.net/jquery-ui-datepicker-with-aurelia/
但是看起来它根本不起作用。我试图调试应用程序,看起来 attached@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] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/templating-binding@0.16.1.
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/templating-binding@0.16.1.
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.16.1.
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.16.1.
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/history-browser@0.9.0.
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/history-browser@0.9.0.
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.17.0.
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.17.0.
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/event-aggregator@0.9.0.
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/event-aggregator@0.9.0.
aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin resources/index.
aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin resources/index.
aurelia-logging-console.js:46 INFO [aurelia] Aurelia Started
aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:9000/dist/app.html ["nav-bar.html", "bootstrap/css/bootstrap.css"]
aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:9000/dist/nav-bar.html []
aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:9000/dist/welcome.html ["http://localhost:9000/dist/resources/datepicker"]
刚做了一个:
- 从您的存储库中克隆
- npm 安装 jspm
- npm 安装
- jspm 安装-y
你猜怎么着。它有效:)
attached = () => {
需要更改为 attached() {
,如 gitter 中所述。
detached
方法需要进行相应的更改。
这个问题可以关闭了——OP 在 aurelia gitter 中解决了这个问题。
我对 customAttribute 有疑问。我想用它来插入 jquery-ui 日期选择器。想法取自这里:http://www.danyow.net/jquery-ui-datepicker-with-aurelia/
但是看起来它根本不起作用。我试图调试应用程序,看起来 attached@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] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/templating-binding@0.16.1. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/templating-binding@0.16.1. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.16.1. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.16.1. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/history-browser@0.9.0. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/history-browser@0.9.0. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.17.0. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.17.0. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/event-aggregator@0.9.0. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/event-aggregator@0.9.0. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin resources/index. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin resources/index. aurelia-logging-console.js:46 INFO [aurelia] Aurelia Started aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:9000/dist/app.html ["nav-bar.html", "bootstrap/css/bootstrap.css"] aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:9000/dist/nav-bar.html [] aurelia-logging-console.js:38 DEBUG [templating] importing resources for http://localhost:9000/dist/welcome.html ["http://localhost:9000/dist/resources/datepicker"]
刚做了一个:
- 从您的存储库中克隆
- npm 安装 jspm
- npm 安装
- jspm 安装-y
你猜怎么着。它有效:)
attached = () => {
需要更改为 attached() {
,如 gitter 中所述。
detached
方法需要进行相应的更改。
这个问题可以关闭了——OP 在 aurelia gitter 中解决了这个问题。