Typescript 以编程方式实例化Aurelia中的组件

是否可以在aurelia中以编程方式创建组件，然后以某种方式将其绑定到视图中该类型的标记。例如，类似于简单树视图的内容，请参见下面HTML模板中的注释

---

树状视图。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);
    }
}

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

从“/tree node”导入{TreeNode}；
导出类树视图{
私有_rootNodes:TreeNode[]=[]；
获取rootNodes（）：TreeNode[]{
返回此。\u rootNodes；
}
公共addRootNode（节点：TreeNode）{
此._rootNodes.push（节点）；
}
}

树节点.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);
    }
}

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

导出类树节点{
私人价值：T；
私有_名称：字符串；
private _children:TreeNode[]=[]；
获取值（）：T{
返回此值；
}
获取名称（）：字符串{
返回此。\u名称；
}
获取子对象（）：TreeNode[]{
把这个还给孩子们；
}
公共addChild（子级：TreeNode）：无效{
这个。_children.push（child）；
}
构造函数（名称：字符串，值：T）{
这个。_name=name；
此值为._值=值；
}
}

树视图.html

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

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

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

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

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

树节点.html

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

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

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

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

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

${name}

我无法使用自定义元素声明来执行此操作。我不知道是否有办法设置自定义元素的视图模型。您可以使用

compose

作为变通方法

树视图.html

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

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

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

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

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

通过这种方式，您将能够执行以下操作：

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

---

这有点冗长，但速度更快。同时，我将看看是否有办法设置自定义元素的视图模型

您所说的是Aurelia的核心功能。 请看

通过创建组件，您现在可以在任何html中使用该组件，如

---

组件可以包含其他组件。

我不知道可绑定解决方案如何处理深度嵌套对象，因为子对象可能包含子对象等等。如果我将其用作可绑定属性，这不意味着整个对象必须序列化为字符串才能用作html属性吗？不，不是！使用

property.bind

时，框架将进行变量赋值。不涉及字符串序列化。我们必须研究一下，但是有没有办法将元素本身绑定到创建的实例？比如：我不这么认为，我也不认为这有什么意义，因为当你这样做的时候，虚拟机是实例化的。用另一个实例替换这个实例对我来说没有多大意义。。。但我不确定这一点，我会尽力让团队得到一个正式的答复。这太好了，谢谢。如果对可用的组件有“代码优先”的方法，那将很有趣。我想你的意思是不同的。我正在寻找一种以编程方式实例化组件（new MyComponent（））的方法，并在视图中将标记链接到创建的实例。主要是因为组件可能有一个复杂的数据模型。您可以将其添加到DOM中，并对其调用

enhanced

，但一般来说，如果您试图向DOM中动态添加内容，您知道它们将去哪里，因此我建议使用

compose

自定义元素