Aurelia视图继承提供了奇怪的行为（typescript骨架）

我最近开始尝试Aurelia（我对Javascript不熟悉，也习惯于类型化语言，所以我从typescript框架开始工作），但在视图继承方面遇到了一些我不理解的奇怪问题

我想创建两个具有通用功能的视图，这就是为什么我想创建一个通用的超类，这两个视图都可以扩展。但是，这导致了意外的行为：在app.html中包含两个视图时，根据require语句的顺序，仅显示其中一个视图

我在下面列出了一个最小的小例子：

parent-view.ts

import {bindable} from 'aurelia-framework';   

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

child-a-view.html

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

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

child-b-view.html

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

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

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中require语句的替代顺序

<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>

作为输出提供一个包含文本“titleba”的页面，而我同样希望有两行“titleaa”和“titlebb”

---

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

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

乙二醇

---

这不一定是Aurelia中的bug，更像是JavaScript的一般问题。但是是的，我们知道继承对于自定义元素是有问题的，所以不推荐使用

奥雷莉亚非常喜欢构图而不是继承

如果需要在两个或多个ViewModel之间共享公共代码，请尝试另一种方法：使用“公共”代码创建一个ViewModel，然后创建本来要放在子ViewModels中的stuff变量

也看到

正如@Alec Buchanan已经指出的，通过使用

compose

，您可以轻松地将两个视图合并到一个自定义元素中（从而实现与继承ViewModel相同的效果）

例如：

child-a-view.html

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

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

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

父视图.html

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

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

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

---

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

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

谢谢您的建议。对于我来说，这确实是一个很好的方法，因为几乎所有的功能对于两个视图都是通用的。这也有助于下一步（我想要一个“meta”组件，它可以根据上下文在child-a视图和child-b视图之间切换）。我确实注意到，对于一个特定的视图，我目前不得不在视图中塞进太多的逻辑，因为它不适合通用模型。是否有一种方法（例如，在视图中添加第二个模型）来解决这种情况？有几种方法可以解决这个问题，但最好的方法是什么在很大程度上取决于您所指的逻辑。如果你能把有问题的模型/视图放在要点中，我可以看一下。