Aurelia view 상속이 이상한 행동을합니다. (typescript skeleton)

Question

최근에 Aurelia를 사용해 보았습니다. (Javascript를 처음 사용하고 입력 된 언어를 사용하여 타이프 스크립트 뼈대에서 작업했기 때문에) 내가 이해하지 못하는 상속을 봅니다.

일반 기능으로 두 개의보기를 만들고 싶었습니다. 두 가지보기를 모두 확장 할 수있는 공통의 수퍼 클래스를 만들고 싶었습니다. 그러나 이로 인해 예기치 않은 동작이 발생했습니다. app.html에서 두 뷰를 모두 포함하는 경우 require 문 순서에 따라 두 뷰 중 하나만 표시됩니다.

부모 - view.ts

import {bindable} from 'aurelia-framework'; 

export abstract class ParentView { 
    @bindable title: string; 
} 

아이-A-view.html

<template><div>${title} A</div></template> 

아이-A-view.ts

:

나는 아래 작은 최소한의 예를 포함

import {ParentView} from './parent-view' 

export class ChildAView extends ParentView { 
    constructor() { 
     super() 
    } 
} 

child-b-view.html

<template><div>${title} B</div></template> 

아이-B-view.ts

import {ParentView} from './parent-view' 

export class ChildBView extends ParentView { 
    constructor() { 
     super() 
    } 
} 

는 app.ts

export class App {} 

app.html

이 출력 된 텍스트를 포함하는 페이지를 제공

<template> 
    <require from="./child-a-view"></require> 
    <child-a-view title="TitleA"></child-a-view> 

    <require from="./child-b-view"></require> 
    <child-b-view title="TitleB"></child-b-view> 
</template> 

"TitleA B", 두 줄 "TitleA A"및 "TitleB B"를 기대합니다. 다시 내가 "TitleB B를 두 줄"TitleA A를 "기대 것 동안

이의 또 다른 주문이 app.html

<template> 
    <require from="./child-b-view"></require> 
    <require from="./child-a-view"></require> 
    <child-a-view title="TitleA"></child-a-view> 
    <child-b-view title="TitleB"></child-b-view> 
</template> 

에 문을 필요는 출력으로 텍스트"TitleB A "를 포함하는 페이지를 제공합니다 ".

이것은 Aurelia의 버그입니까,보기 클래스를 상속하지 못합니까? 아니면이 문제를 일으키는 잘못된 것이 있습니까?

Answer 1

그것의 필요하지 아우렐 리아의 버그, 자바 스크립트와 더 일반적인 문제. 그러나 예, 상속은 맞춤 요소에 문제가있는 것으로 알려져 있으며 권장되지 않습니다.

아우렐 리아는 상속에 비해 강력한 구성을 선호합니다.

두 개 이상의 ViewModel간에 공통 코드를 공유해야하는 경우 다른 방법으로 접근 해보십시오. 하나의 ViewModel을 "공통"코드로 만들고 다른 방법으로 넣을 stuff 변수를 만듭니다. child ViewModels입니다.

또한 this similar question

을보고 @Alec 뷰캐넌이 이미 지적했듯이, 당신은 쉽게 compose를 사용하여 하나 개의 사용자 정의 요소 (하여 뷰 모델을 상속하는 것과 같은 효과를 달성)에 두 가지보기를 결합 할 수 있습니다.

아이-A-view.html

<template><div>${title} A</div></template> 

아이-B-view.html

<template><div>${title} B</div></template> 

부모 view.ts : 예컨대

,363,210

import {bindable} from 'aurelia-framework'; 

export class ParentView { 
    @bindable title: string; 
} 

이 자동으로 학부모 것처럼 아이 뷰의 HTML 파일을 밟을 수 있다는 것을 의미, 부모 뷰의에 아이 뷰의 바인딩 컨텍스트를 설정합니다

<template> 
    <compose view="./child-a-view.html"></compose> 
    <compose view="./child-b-view.html"></compose> 
</template> 

부모 - view.html view.ts는 ViewModel입니다.

Answer 2

이러한 모듈을 맞춤 요소로 사용하려고해야합니까? compose 요소를 사용하여 각 요소를 포함 할 수 있습니까?

예를 들어

<template> 
    <compose view-model="childAView" view="./child-a-view"></compose> 
    <compose view-model="childBView" view="./child-b-view"></compose> 
<template> 

Answer 3

파생 클래스 자체 동작이 필요합니다. 귀하의 경우, Aurelia가 올바르게 상속 받도록 알리기 위해 하위 클래스의 장식 자 하나 이상이 필요합니다.