Aureliaでコンポーネントをプログラムでインスタンス化する

Question

aureliaでプログラムでコンポーネントを作成し、ビューのそのタイプのタグに何らかの方法でバインドすることは可能ですか？たとえば、単純なツリービューのようなものは、下記のHTMLテンプレートのコメントを参照してください。

---

ツリーview.ts

import {TreeNode} from "./tree-node"; 

export class TreeView<T> { 
    private _rootNodes: TreeNode<T>[] = []; 

    get rootNodes(): TreeNode<T>[] { 
     return this._rootNodes; 
    } 

    public addRootNode(node: TreeNode<T>) { 
     this._rootNodes.push(node); 
    } 
} 

ツリーnode.ts

export class TreeNode<T> { 

    private _value: T; 
    private _name: string; 
    private _children: TreeNode<T>[] = []; 

    get value(): T { 
     return this._value; 
    } 

    get name(): string { 
     return this._name; 
    } 

    get children(): TreeNode<T>[] { 
     return this._children; 
    } 

    public addChild(child: TreeNode<T>): void { 
     this._children.push(child); 
    } 

    constructor(name: string, value: T) { 
     this._name = name; 
     this._value = value; 
    } 
} 

ツリーview.html

<template> 
    <!-- Something like this is the intend --> 
    <tree-node repeat.for="node of rootNodes"></tree-node> 
</template> 

ツリーnode.html

<template> 
    <div>${name}</div> 

    <div class='childNodes'> 
     <!-- Something like this is the intend --> 
     <tree-node repeat.for="node of children"></tree-node> 
    </div> 
</template> 

Answer 1

私はこの使用してカスタム要素の宣言を行うことができませんでした。カスタム要素のビューモデルを設定する方法があるかどうかはわかりません。回避策としてcomposeを使用できます。 https://gist.run/?id=95b8892918d7e5a7aadf0ac7eb28124d

別の解決策（と私の意見では、より良い）が公開している実行例

<template> 
    <div>${name}</div> 

    <div class='childNodes' style="margin-left: 20px;"> 
     <!-- Something like this is the intend --> 
     <compose repeat.for="node of children" view="./tree-node.html" view-model.bind="node"></compose> 
    </div> 
</template> 

木view.html

<template> 
    <require from="./tree-node"></require> 

    <!-- Something like this is the intend --> 
    <compose repeat.for="node of rootNodes" view="./tree-node.html" view-model.bind="node"></compose> 
</template> 

ツリーnode.html nameおよびchildを結合可能プロパティ：

<tree-node repeat.for="node of rootNodes" name.bind="node.name" value.bind="node.value" children.bind="node.children"></tree-node> 

これはもう少し冗長ですが、より速く：このように

export class TreeNode { 
    @bindable value; 
    @bindable name; 
    @bindable children = []; 
} 

、あなたはこのような何かを行うことができるだろう。一方、カスタム要素のビューモデルを設定する方法があるかどうかを確認します。

Answer 2

あなたが話しているのは、Aureliaの中核機能です。 は、あなたが今、他の成分を含むことができる<mycomponent></mycomponent>

コンポーネントとして任意のHTMLでそのコンポーネントを使用することができるコンポーネントを作成することにより​​

を参照してください。