Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Aurelia customAttribute not working

I have a problem with customAttribute. I want to use it to plug in jquery-ui datepicker. Idea taken from here: 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 [email protected] is not fired at all. 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.

The most important two files:


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);
}

and the console is clean:

DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Loading plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. aurelia-logging-console.js:38 DEBUG [aurelia] Configured plugin http://localhost:9000/jspm_packages/github/aurelia/[email protected]. 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"]

like image 956
Aleksander Gralak Avatar asked Oct 27 '15 12:10

Aleksander Gralak


2 Answers

attached = () => { needed to be changed to attached() {, as discussed in the gitter.

Corresponding changes were required for the detached method.

This question can be closed- the OP got the issue resolved in the aurelia gitter.

like image 172
Jeremy Danyow Avatar answered Sep 18 '22 22:09

Jeremy Danyow


just did a:

  • clone from your repo
  • npm install jspm
  • npm install
  • jspm install -y

and guess what. it works :)

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

like image 21
fops Avatar answered Sep 19 '22 22:09

fops