Grundlegende benutzerdefinierte Element scheint nicht zu funktionieren

Question

Ich versuche, ein Standard-Benutzerstatus-Widget für meine Aurelia App zu erstellen, und ich bin mir nicht sicher, was ich falsch mache. Als Ausgangspunkt habe ich the docs verfolgt, aber meine Ergebnisse sind nicht das, was sie mir erwarten, und ich bekomme weder im Build noch im Browser Fehler.

Relevante Dateien sind wie folgt:

<!-- nav-bar.html --> 
<template bindable='router'> 
    <require from="./user-status "></require> 
    <!-- various nav buttons --> 
    <p class="navbar-collapse collapse navbar-text"> 
     Test <user-status></user-status> 
     </p> 

benutzer status.html

<template> 
    ${status} 
</template> 

benutzer status.js

export default class UserStatusCustomElement { 
     constructor() { 
     this.status = 'Be sure to drink your Ovaltine!'; 
     } 
    } 

wenn ich die in nav-bar.html erfordern ändern aussehen für ./user-status.html scheint es eine Wirkung zu haben (zusätzliche Aurelia-aussehende Attribute sind ad ded an das user-status-Element im gerenderten html), aber die Nachricht wird nicht gerendert (man geht davon aus, dass b/c die Klasse und das Rendern nicht als reine html-Datei abruft). Wenn ich unverändert belasse, tritt kein Fehler auf, aber diese Attribute werden nicht hinzugefügt und es wird nichts gerendert, selbst wenn es sich um statischen Text handelt.

Answer 1

Ich spielte mit Ihrem Code und festgestellt, dass das Entfernen von default aus dem user-status.js Modul das Problem behoben. Ich vermute, der Grund hat etwas damit zu tun, wie Aurelia Module-Loader (System.js, webpack, ...) beim Importieren von Modulen verwendet. Leider weiß ich nicht genug über die Interna von Aurelia, um eine tiefere Antwort zu geben.