我正在使用TypeScript开发Aurelia应用程序。在本申请中予定义的集合中的每一共享的一组绑定属性的如图以下简化的例子,得到翻译到CSS设置的定制要素:如何在Aurelia中“继承”可绑定的属性?
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理解可绑定属性的继承尚不支持。正如Rob Eisenberg所说,要走的路将是在这里使用作文。 但是,当我仍然需要实现span
和width
属性,但也通过依赖注入导入组件,只是增加了实际计算左边距的功能。因此,所有这些方法仍然会产生大量的复制和粘贴代码。
有没有更好的方法来解决这个问题?
我正在考虑在twitter上使用@AureliaEffect提示后使用自定义属性,但这仍然不会阻止我实现元素上的每个必需属性,以便能够在模板中绑定到它的元素。
对此背后的商业案例(又名“为什么我选择这种方法”)的简短解释:我的应用程序的用户可以在电子铁路联锁系统中找到轨道布局。这要求在一些通用单元中指定元素的宽度或偏移量,而不是以像素为单位。此属性也需要为每个元素指定,而不是每个元素类。
(还有另外一个问题在这里出现StackOverflow寻址有些类似的话题,但有一个办法,我的情况不工作:Using the @bindable attribute on child class in Aurelia)
虽然此功能将添加到Aurelia即将发布的其中一个版本中,但还有另一种方法可以节省翻倍逻辑:通过装饰器添加可绑定属性。我在这里解释过:https://stackoverflow.com/a/45361429/1521227 – Spontifixus