3

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
  • Though this feature will be added in one of the upcoming releases of Aurelia, there is another way to save doubling the logic: By adding the bindable properties by means of a decorator. I have explained that over here: stackoverflow.com/a/45361429/1521227 Jul 27, 2017 at 21:40

1 Answer 1

0

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

3
  • Thanks for notifying me - though I am also the "Spontifixus" discussing in that thread ;) Apr 26, 2017 at 16:36
  • Ah! That's funny, I didn't pay attention to the names of peoples participating in the discussion, ahaha. At least other people will now have a link directly to this :) Apr 26, 2017 at 16:39
  • 1
    I will write an answer to this question once the issue has been solved. Apr 26, 2017 at 19:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.