Wie erhalte ich bindbare Eigenschaften in Aurelia?

Question

Ich entwickle eine Aurelia-Anwendung mit TypeScript. In dieser Anwendung definiert ich eine Reihe von benutzerdefinierten Elemente jeweils einen Satz von bindungsfähigen Eigenschaften teilen, die CSS-Einstellungen übersetzt erhalten, wie in der folgenden vereinfachten Beispiel:

import {computedFrom, bindable, autoinject} from 'aurelia-framework'; 

@autoinject 
export class MyCustomElement { 
    @bindable span: number; 

    @computedFrom('span') 
    get width() { 
     return this.span? this.span* 26 : 0; 
    } 

    // Leaving out a whole bunch of other code for sake of readability 
} 

Der HTML-Code für dieses Element wie folgt aussieht irgendwie:

<template> 
    <div css="width: ${width}px;"> 
     <svg xmlns="http://www.w3.org/2000/svg" css="width: ${width}px;"> 
     </svg> 
    </div> 
</template> 

Also ich brauche den Wert der berechneten Eigenschaft mehrmals in der HTML-Vorlage des benutzerdefinierten Elements.

Jetzt brauchen auch andere Elemente die span und die width Eigenschaft. Wie ich aus dem Lesen von github: Aurelia Issue #210 verstanden habe, wird die Vererbung von bindbaren Eigenschaften noch nicht unterstützt. Wie Rob Eisenberg sagte, würde der Weg hier Komposition sein. Aber wenn ich das benutze, würde ich immer noch die span Eigenschaft und die width Eigenschaft implementieren müssen, sondern auch eine Komponente über die Abhängigkeitsinjektion importieren, die gerade die Funktionalität hinzufügt, den linken Rand tatsächlich zu berechnen. Alles in allem führt dieser Ansatz immer noch zu vielen Kopier- und Einfügecodes.

Gibt es eine bessere Möglichkeit, dies zu beheben?

Ich dachte nach einem Hinweis von @AureliaEffect auf twitter darüber nach, benutzerdefinierte Attribute dafür zu verwenden, aber das hindert mich trotzdem nicht daran, jede der erforderlichen Eigenschaften für das Element zu implementieren, um in der Vorlage daran binden zu können des Elements.

Eine kurze Erklärung zum dahinterstehenden Geschäftsfall (a.k.a. "Warum habe ich diesen Ansatz gewählt?"): Benutzer meiner Anwendung können ein Gleislayout erstellen, wie Sie es in elektronischen Eisenbahnverriegelungssystemen finden. Dies erfordert die Angabe der Breite von Elementen oder deren Versatz in einigen generischen Einheiten, nicht in Pixeln. Auch diese Eigenschaften müssen pro Element und nicht pro Elementklasse angegeben werden.

(Es ist eine andere Frage hier ein Stackoverflow ein etwas ähnliches Thema Adressierung, aber mit einem Ansatz funktioniert nicht in meinem Szenario: Using the @bindable attribute on child class in Aurelia)

Answer 1

Vielleicht sehen Sie es, da diese Frage, aber es gibt eine aktive Diskussion über richtig abgeht jetzt darüber auf GitHub mit schließlich eine PR kommt bald. Sie können die Diskussion hier folgen: https://github.com/aurelia/templating/pull/507#issuecomment-297163265