3

我正在使用 TypeScript 开发 Aurelia 应用程序。在这个应用程序中，我定义了一组自定义元素，每个元素共享一组可绑定属性，这些属性被转换为 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 模板中多次计算计算属性的值。

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

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

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

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

（这里还有一个问题 StackOverflow 解决了一个有点相似的主题，但在我的场景中不起作用的方法是：在 Aurelia 的子类上使用 @bindable 属性）

4

1 回答 1

0

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

于 2017-04-26T12:51:44.117 回答