如何在Aurelia中「繼承」可綁定的屬性？

我正在使用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）

來源

2016-07-27 Spontifixus

雖然此功能將添加到Aurelia即將發佈的其中一個版本中，但還有另一種方法可以節省翻倍邏輯：通過裝飾器添加可綁定屬性。我在這裏解釋過：https：//stackoverflow.com/a/45361429/1521227 – Spontifixus

也許你看到它，因爲這個問題，但有一個活躍的討論正在進行權現在在github上關於這個，最終會有一個公關進入。您可以在此處繼續討論： https://github.com/aurelia/templating/pull/507#issuecomment-297163265

來源

2017-04-26 12:51:44

感謝您通知我 - 雖然我也是在那個線程中討論的「Spontifixus」;） – Spontifixus

啊！這很有趣，我沒有注意參與討論的人民的名字，哈哈。至少其他人現在可以直接鏈接到這個:) –

一旦問題解決，我會爲這個問題寫一個答案。 – Spontifixus

如何在Aurelia中「繼承」可綁定的屬性？

回答

相關問題