Aurelia視圖繼承給出了奇怪的行爲（打字稿骨架）

我最近開始嘗試Aurelia（我是Javascript新手，用於鍵入語言，所以我正在使用打字稿框架），並且遇到了一些奇怪的問題查看繼承，我不明白。Aurelia視圖繼承給出了奇怪的行爲（打字稿骨架）

我想創建兩個具有通用功能的視圖，這就是爲什麼我想創建一個兩個視圖都可以擴展的公共超類。然而，這造成了意想不到的行爲：當在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」。

的另一種排序需要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乙」。

這是Aurelia中的一個錯誤，是不是允許繼承視圖類，或者我在這裏做錯了什麼導致了這個？

來源

2016-09-28 hmoens

它不一定在奧裏利亞的錯誤，更用JavaScript的一個普遍問題。但是，是的，已知自定義元素的繼承是有問題的，因此不推薦。

Aurelia強烈支持繼承的構成。

如果您需要在兩個或多個ViewModel之間共享通用代碼，請嘗試以相反方式處理它：使用一個「common」代碼創建一個ViewModel，然後創建您將以其他方式放入的東西變量子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

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文件，就好像父母與view.ts是他們的ViewModel。

來源

2016-09-29 13:57:29

感謝您的建議。對於我的情況來說，這確實是一個很好的方法，因爲幾乎所有的功能對於這兩種觀點都很常見。它也有助於下一步（我想要一個'meta'組件，它可以根據上下文在子視圖和子視圖之間切換）。我注意到，對於一個特定的視圖，我目前不得不在視圖中填入太多邏輯，因爲它不適合通用模型。有沒有辦法可以爲視圖添加第二個模型來解決這種情況？ – hmoens

有幾種方法可以解決這個問題，但最好的方法是在很大程度上取決於您所指的邏輯。如果您可以將模型/視圖置於要點中，我可以查看它。 https://gist.run/?id=883568d7c8e2add9ed393150100f4744 –

是否有必要嘗試將這些模塊用作自定義元素？你不能使用compose元素來包含每個元素嗎？

如

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

來源

2016-09-29 11:42:03

派生類需要自己的行爲。在你的情況下，你需要在子類上至少有一個裝飾器來告訴Aurelia繼承它的權利。

來源

2018-02-07 07:58:22 bigopon

Aurelia視圖繼承給出了奇怪的行爲（打字稿骨架）

回答

相關問題