在Aurelia项目中找不到Materialise-css javascript函数

Question

I've created a custom attribute to control the lifecycle of a materilaize select element:

import {customAttribute} from 'aurelia-templating';
import {inject} from 'aurelia-dependency-injection';

@customAttribute('material-select')
@inject(Element)
export class MaterialSelect {
    element: Element = null;

    constructor(element) {
        this.element = element;
    }

    attached() {
        console.log("ATTACHED");
        console.log(`The attached element is: ${this.element}`);
        $(this.element).material_select();
    }

    detached() {
        console.log("DETACHED");
        $(this.element).material_select('destroy');
    }
}

Additionally, I've installed materialize-css with:

jspm install npm:materialize-css

... and I've imported materilialize in main.ts with:

import materialize from 'materialize-css';

But, whenever an element with the material-select attribute tries to load I get this console output:

ATTACHED
The attached element is: [object HTMLSelectElement]
Uncaught TypeError: $(...).material_select is not a function

How do I get the materialize-css javascript functions to be recognized from within Aurelia?

Answer 1

Uninstall the npm version of the package and install the github version instead:

jspm uninstall npm:materialize-css
jspm install github:Dogfalo/materialize

By installing the github version the package override will be used and the package will be installed with the correct dependencies (jquery + css).

Then you'll be able to do this:

import $ from 'Dogfalo/materialize';

$('.foo').material_select();

Note: the steps above will not work until this PR is merged