Question

我最近开始尝试使用Aurelia（我是Javascript的新手并且习惯于键入语言，所以我使用的是打字稿骨架），我遇到了一些我不理解的视图继承问题。< / p>

我想创建两个具有共同功能的视图，这就是为什么我想创建一个两个视图都可以扩展的公共超类。然而，这会导致意外行为：当在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()
    }
}

子-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”。

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”的页面作为输出，同时我还要求两行“TitleA A”和“TitleB B”。

这是Aurelia中的一个错误，是不允许继承视图类，还是我在这里做错了导致这个？

Answer 1

它不一定是Aurelia中的错误，更像是JavaScript的一般问题。但是，是的，继承被认为是自定义元素的问题，不推荐使用。

Aurelia强烈赞成这种构成而非继承。

如果您需要在两个或更多ViewModel之间共享公共代码，请尝试以相反的方式处理它：使用＆＃34; common＆＃34;创建一个ViewModel。代码，然后你创建你将放在子ViewModels中的stuff变量。

另见this similar question

正如@Alec Buchanan已经指出的那样，您可以使用compose轻松地将两个视图合并为一个自定义元素（从而实现与继承ViewModel相同的效果）。

例如：

儿童-A-view.html

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

儿童-B-view.html

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

<强>父 - view.ts

import {bindable} from 'aurelia-framework'; export class ParentView { @bindable title: string; }

<强>父 - view.html

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

这将自动将子视图的绑定上下文设置为父视图的绑定上下文，这意味着您可以使用子视图html文件，就像parent-view.ts是他们的ViewModel一样。

Answer 2

是否有必要尝试将这些模块用作自定义元素？你能否使用compose元素来包含每一个？

例如

def processList(myList:List[Record]): Unit = {
}

Answer 3

派生类需要自己的行为。在您的情况下，您需要在子类上至少有一个装饰器告诉Aurelia正确地继承它。

Aurelia视图继承给出奇怪的行为（打字稿骨架）

3 个答案: