Aurelia에서 바인딩 가능한 속성을 상속하는 방법은 무엇입니까?

Question

TypeScript를 사용하여 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 코드는 다음과 같이 어떻게 든 같습니다 :이 응용 프로그램에서 나는 사용자 지정 요소 다음과 같은 간단한 예에서와 같이 CSS 설정으로 번역 될 바인딩 속성 집합을 공유하는 각각의 세트를 정의

<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 속성을 모두 구현해야하지만 실제로 왼쪽 여백을 계산하는 기능을 추가하는 종속성 삽입을 통해 구성 요소를 가져와야합니다. 따라서이 모든 접근 방식은 여전히 ​​많은 복사 및 붙여 넣기 코드를 생성합니다.

더 좋은 방법이 있습니까?

트위터에서 @AureliaEffect의 힌트를 사용하여 사용자 정의 속성을 사용하려고 생각했지만 여전히 템플릿의 속성을 바인딩 할 수 있도록 각 요소를 필요한 속성에 구현할 수 없습니다 요소의

"이 접근 방식을 선택한 이유는 무엇입니까?"("왜이 접근법을 선택 했습니까?") 뒤에있는 비즈니스 사례에 대한 간단한 설명 : 전자 철도 연동 시스템에서 내 응용 프로그램 사용자가 트랙 레이아웃을 만들 수 있습니다. 픽셀 단위가 아닌 일반 단위로 요소의 너비 또는 오프셋을 지정해야합니다. 또한이 속성은 요소 클래스마다가 아니라 요소별로 지정해야합니다.

(가 또 다른 질문은 여기에 다소 비슷한 주제를 주소 지정에 StackOverflow이지만, 접근 방법과 내 시나리오에서 작동하지 : Using the @bindable attribute on child class in Aurelia)

Answer 1

은 아마 당신은 그 질문 때문에 그것을 볼 수 있지만 오른쪽으로가는 적극적인 토론이있다 지금은 기자 회견에서 곧 PR이 곧 나옵니다. https://github.com/aurelia/templating/pull/507#issuecomment-297163265