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作为解决方法。

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

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

正在运行示例https://gist.run/?id=95b8892918d7e5a7aadf0ac7eb28124d

另一种解决方案（在我看来更好）是将name和child公开为可绑定属性：

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

通过这种方式，你可以做到这样的事情：

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

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

Answer 2

您所谈论的是Aurelia的核心功能。请参阅http://aurelia.io/docs/fundamentals/components#creating-a-component

通过创建组件，您现在可以在任何html中将该组件用作<mycomponent></mycomponent>

组件可以包含其他组件。

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

2 个答案: