简体   繁体   English

Aurelia customAttribute无法正常工作

[英]Aurelia customAttribute not working

I have a problem with customAttribute. 我有customAttribute的问题。 I want to use it to plug in jquery-ui datepicker. 我想用它来插入jquery-ui datepicker。 Idea taken from here: http://www.danyow.net/jquery-ui-datepicker-with-aurelia/ 从这里获取的想法: http//www.danyow.net/jquery-ui-datepicker-with-aurelia/

However it looks like it is not working at all. 然而,看起来它根本不起作用。 I have tried to debug the application and it looks like attached@datePicker.js is not fired at all. 我试图调试应用程序,看起来像attach@datePicker.js根本没有被解雇。 However the file itself is being requested from the server. 但是,正在从服务器请求文件本身。 The worst thing is that I had it working yesterday evening, but today morning ... 最糟糕的是我昨天晚上工作了,但今天早上......

I have created simple example in my fork of skeleton application: https://github.com/Exsilium122/skeleton-navigation so it is ready to be cloned and run for troubleshoot. 我在我的骨架应用程序分支中创建了一个简单的示例: https//github.com/Exsilium122/skeleton-navigation,因此可以克隆并运行以进行故障排除。

The most important two files: 最重要的两个文件:


welcome.html welcome.html

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

datepicker.js 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);
}

and the console is clean: 并且控制台很干净:

DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/templating-binding@0.16.1 . DEBUG [aurelia]加载插件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]配置的插件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]加载插件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]配置的插件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]加载插件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]配置的插件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]加载插件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]已配置的插件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]加载插件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]配置的插件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]加载插件资源/索引。 aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin resources/index. aurelia-logging-console.js:38 DEBUG [aurelia]配置的插件资源/索引。 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 "] 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 ”]的资源

attached = () => { needed to be changed to attached() { , as discussed in the gitter. attached = () => {需要更改为attached() { ,如gitter中所述。

Corresponding changes were required for the detached method. detached方法需要相应的变化。

This question can be closed- the OP got the issue resolved in the aurelia gitter. 这个问题可以被关闭 - OP在aurelia gitter中解决了问题。

just did a: 刚做了一个:

  • clone from your repo 克隆你的回购
  • npm install jspm npm install jspm
  • npm install npm安装
  • jspm install -y jspm install -y

and guess what. 你猜怎么着。 it works :) 有用 :)

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM