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>

这一切都有效。但是，我想将TreeViewNode转换为自定义元素，而不是仅使用继承父视图模型的compose。

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

Answer 1

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

树视图-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>

如何使用模板而不是撰写

1 个答案: