Attribut personnalisé sur Aurelia ne fonctionne pas

Question

Je suis un débutant par Aurelia. Je veux programmer un attribut personnalisé que vous voyez ici:

square.js:

/*jshint esversion: 6 */ 
import {bindable, inject} from 'aurelia-framework'; 

@inject(Element) 
export class SquareCustomAttribute { 
    @bindable sideLength; 
    @bindable color; 

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

    sideLengthChanged(newValue, oldValue){ 
    this.element.style.width = this.element.style.height = `${newValue}px`; 
    } 

    colorChanged(newValue, oldValue){ 
    this.element.style.backgroundColor = newValue; 
    } 
} 

et vous pouvez voir html dans les domaines suivants:

<template> 
    <require from="./square"></require> 
    <div square="color.bind: squareColor; side-length.bind: squareSize"></div> 
</template> 

Je reçois une erreur:

ERROR [app-router] Error: (SystemJS) Unable to dynamically transpile ES module as SystemJS.transpiler set to false.

Pourriez-vous s'il vous plaît aide-moi?

Answer 1

Un moyen facile de faire ce que vous essayez de faire (pas uniquement un attribut) est la suivante:

essayez ceci:

square.html

<template bindable="sideLength, color"> 
    <div css.bind="height: ${sideLength}; width: ${sideLength}; background-color: ${color}"/> 
</template> 

maintenant vous utilisez juste comme ceci:

[tout] .html

<require from="[path]/[to]/square.html"></require> 
. 
. 
. 
<square side-length="50" color="red"></square> 
. 
. 
. 

Il est presque un exemple précis de ce sous liaison de données dans les docs: Aurelia Docs: Cheat Sheet - Databinding

Answer 2

Création d'une réponse si cela peut être fermé.

---

L'utilisateur avait une erreur avec son fichier de script provoquant l'échec du transpiler. La modification de l'extension de fichier de .js à .ts a résolu le problème car le fichier TypeScript pouvait être géré par SystemJS.