inheritance - 如何在 Aurelia 中设置 "inherit"可绑定(bind)属性？

Question

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

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 代码看起来像这样:

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

所以我在整个自定义元素的 HTML 模板中多次需要计算属性的值。

现在其他元素也需要 span 和 width 属性。正如我从阅读中了解到的那样 github: Aurelia Issue #210尚不支持可绑定(bind)属性的继承。正如 Rob Eisenberg 所说，要走的路就是在这里使用合成。但是当使用它时，我仍然需要同时实现 span 和 width 属性，而且还需要通过依赖注入(inject)导入一个组件，它只添加了实际计算左边距的功能.所以总而言之，这种方法仍然会导致大量的复制和粘贴代码。

有没有更好的方法来解决这个问题？

在推特上@AureliaEffect 的提示后，我正在考虑为此使用自定义属性，但这仍然不会阻止我在元素上实现每个必需的属性，以便能够在模板中绑定(bind)到它元素。

对此背后的业务案例的简短解释(又名“我为什么选择这种方法”):我的应用程序的用户能够构建轨道布局，就像您在电子铁路联锁系统中找到的那样。这需要以某些通用单位而不是以像素为单位指定元素的宽度或它们的偏移量。此外，需要为每个元素而不是每个元素类指定此属性。

(这里有另一个问题，StackOverflow 解决了一个有点类似的主题，但在我的场景中使用的方法不起作用:Using the @bindable attribute on child class in Aurelia)

Answer 1

也许你在那个问题后看到了它，但现在在 github 上对此进行了积极的讨论，最终很快就会有 PR。您可以在此处关注讨论: https://github.com/aurelia/templating/pull/507#issuecomment-297163265