Aureliaでは、実行時にカスタムコントロールをスワップする良い方法はありますか？

Question

Aureliaでは、実行時にカスタム要素を交換する良い方法はありますか？

私のユースケースは、いくつかの場所で使用されるコントロールですが、ユーザーは、指定されたコントロールがどのようにレンダリングされ、動作するかを検討したいことがあります。私は現在、文字列からビューをレンダリングするInlineViewStrategyを持っていますが、ビューモデル内でバインディングなどを制御できないという欠点があります。実行時にビューモデルを選択して使用することはできますか？また、デフォルトでそこにあるものの代わりに自分自身で構築する新しいカスタムコントロールを登録できるようにすることはできますか？

https://github.com/jeremeevans/EspalierJS

セルがInlineViewStrategyを使用している：

https://github.com/jeremeevans/EspalierJS/blob/master/src/grid/espalier-cell.ts

とビューがconfigに地図に定義されています。

だから、私は、グリッドを構築しています

https://github.com/jeremeevans/EspalierJS/blob/master/src/grid/espalier-config.ts

これは、エンドユーザーがセルの動作を十分高いレベルでカスタマイズすることができず、一般的にテンプレート化していないからです。パフォーマンスの面でも優れているわけではありません。

カスタムコントロール定義をそこに配置して、ユーザーがコントロール全体を構築してセルに入ることを望みます。

Answer 1

私は、Composeの使用からキャッシュされたビューファクトリの使用への切り替えと、それらのビューファクトリからのビューのレンダリングによって、特にIE11でパフォーマンスを大幅に向上させることができました。

IがViewFactoryのに文字列の静的なマップを持っており、必要に応じてビュー工場を構築し、細胞ビューにビューファクトリをバインド：

<td colspan="${(!settings.getButtons && $index == (settings.columns.length - 1)) ? 2 : 1}" repeat.for="column of settings.columns & oneTime"> <espalier-cell column.bind="column" view.bind="column.view" record.bind="record"></espalier-cell> </td>

` インポート{IEspalierDataFormatter}」から./espalier-data-formatter "; {IColumnDefinition}を "./column-definition"からインポートします。 "aurelia-framework"の{bindable、customElement、inject、noView、ViewSlot、ViewFactory、Container}をインポートします。 "{./enums"から{ColumnType}をインポートします。

@customElement("espalier-cell") 
@noView() 
@inject(ViewSlot, Container) 
export class EspalierCell { 
    @bindable 
    public column: IColumnDefinition<any>; 

    @bindable 
    public record: any; 

    @bindable 
    public view: ViewFactory; 

    protected data: any; 
    private isAttached = false; 

    constructor(private viewSlot: ViewSlot, private container: Container) { } 

    protected attached() { 
    this.isAttached = true; 
    this.loadView(); 
    } 

    protected viewChanged() { 
    if (this.isAttached) { 
     this.loadView(); 
    } 
    } 

    private loadView() { 
    const propertyValue = this.record[this.column.propertyName]; 
    this.data = (<IEspalierDataFormatter>this.column.dataFormatter).format(propertyValue, this.record); 
    let view = this.view.create(this.container); 
    view.bind(this); 
    this.viewSlot.add(view); 
    this.viewSlot.attached(); 
    } 
} 

`` `