如何使用模板而不是组合

Question

我有一个基于Aurelia绑定的TreeView，它工作得很好。

有一个名为TreeView的组件，其中包含通常的视图和视图模型。

然后我有了另一个视图TreeViewNode.html，TreeView递归地使用它。

    <template>
    <div content-id="treeview-root">
        <compose view="./tree-view-node.html"></compose>
        <compose repeat.for="item of root.items"  view="./tree-view-node.html"></compose>
    </div>
</template>

这一切都行得通。但是，我希望将视图模型转换为自定义元素，而不只是使用继承父视图模型的compose。

将其转换为自定义元素的问题是它丢失了TreeView视图模型，该视图模型包含处理事件的所有方法，如拖放和项目选择。

Answer 1

您可以使用bindables传入自定义元素所需的视图模型部分。

tree-view-node.html：

<template bindable="viewModelParts">
    <div click.trigger="viewModelParts.itemSelected()">Click here</div>
</template>

consumer.html：

<template>
    <require "./tree-view-node.html></require>
    <div content-id="tree view-root">
        <tree-view-node repeat.for="item of root.items" view-model-parts.one-time="theViewModelParts"></tree-view-node>
    </div>
</template>