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 テンプレート全体で、計算されたプロパティの値が何度か必要になります。

現在、他の要素にもspanおよびwidthプロパティが必要です。githubを読んで理解したように: Aurelia Issue #210バインド可能なプロパティの継承はまだサポートされていません。ロブ・アイゼンバーグが述べたように、ここで合成を使用する方法があります。しかし、それを使用する場合は、spanとwidthプロパティの両方を実装する必要がありますが、実際に左マージンを計算する機能を追加する依存性注入を介してコンポーネントをインポートする必要もあります。したがって、このアプローチ全体でも、多くのコピー アンド ペースト コードが必要になります。

これに対処するより良い方法はありますか？

Twitterの@AureliaEffectからのヒントの後で、これにカスタム属性を使用することを考えていましたが、要素のテンプレートでそれにバインドできるように、要素に必要な各プロパティを実装することを妨げるものではありません。

この背後にあるビジネス ケースの簡単な説明 (別名「なぜこのアプローチを選んだのか」): 私のアプリケーションのユーザーは、電子鉄道連動システムで見られるような線路レイアウトを構築できます。これには、要素の幅またはオフセットを、ピクセルではなく一般的な単位で指定する必要があります。また、このプロパティは、要素クラスごとではなく、要素ごとに指定する必要があります。

(ここで別の質問がありますが、ある程度似たトピックに対処する StackOverflow ですが、私のシナリオでは機能しないアプローチがあります: Using the @bindable attribute on child class in Aurelia )

4

1 に答える 1