How to “inherit” bindable properties in Aurelia?

问题

I am developing an Aurelia application using TypeScript. In this application I defined a set of custom elements each sharing a set of bindable properties that get translated to css settings as shown in the following simplified example:

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
}

The HTML code for this element looks somehow like this:

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

So I need the value of the computed property several times throughout the HTML template of the custom element.

Now other elements also need the span and the width property. As I understood from reading github: Aurelia Issue #210 inheritance of bindable properties is not yet supported. As Rob Eisenberg stated the way to go would be using composition here. But when using that I still would need to implement both the span and the width property but also import a component via dependency injection that just adds the functionality of actually calculating the left margin. So all in all this approach still results in a lot of copy and paste code.

Is there a better way to address this?

I was thinking about using custom attributes for this after a hint from @AureliaEffect on twitter, but that still won't prevent me from implementing each of the required properties on the element to be able to bind to it in the template of the element.

A short explanation on the business case behind this (a.k.a. "Why did I chose this approach"): Users of my application are able to build a track layout as you find it in electronic railway interlocking systems. This requires to specify the width of elements or their offset in some generic units, not in pixels. Also this properties need to be specified per element and not per element class.

(There is another question here a StackOverflow addressing a somewhat similar topic, but with an approach not working in my scenario: Using the @bindable attribute on child class in Aurelia)

回答1:

Maybe you see it since that question, but there's an active discussion going on right now about this on github with eventually a PR coming in soon. You can follow the discussion right here : https://github.com/aurelia/templating/pull/507#issuecomment-297163265

来源：https://stackoverflow.com/questions/38607571/how-to-inherit-bindable-properties-in-aurelia

标签

inheritance

typescript

aurelia

bindable