如何“继承" Aurelia中的可绑定属性? [英] How to "inherit" bindable properties in Aurelia?

问题描述

我正在使用TypeScript开发Aurelia应用程序.在此应用程序中，我定义了一组自定义元素，每个元素共享一组可绑定属性，这些属性可转换为css设置，如以下简化示例所示:

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
}

此元素的HTML代码如下所示:

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>

因此在整个自定义元素的HTML模板中，我需要多次计算属性的值.

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

现在其他元素也需要span和width属性.从阅读 github上可以理解，Aurelia第210号问题尚无可绑定属性的继承支持的.正如罗布·艾森伯格(Rob Eisenberg)所说，在这里使用合成方法是可行的. 但是当使用它时，我仍然需要同时实现span和width属性，而且还需要通过依赖项注入导入一个组件，该组件仅添加了实际计算左边距的功能.因此，所有这些方法仍然会导致大量复制和粘贴代码.

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?

在Twitter上@AureliaEffect提示后，我正在考虑为此使用自定义属性，但这仍然不会阻止我在元素的模板中实现能够绑定到该元素的每个必需属性.元素.

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.

(这里还有另一个问题，一个StackOverflow解决了一个相似的话题，但是在我的情况下不起作用:

(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)

推荐答案

也许从这个问题开始就可以看到它，但是现在在github上对此进行了积极的讨论，最终PR即将发布.您可以在此处关注讨论: https://github.com/aurelia/templating/pull/507#issuecomment- 297163265

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

这篇关于如何“继承" Aurelia中的可绑定属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！