如何使用模板而不是撰写答案

【问题标题】：How to use template instead of compose如何使用模板而不是撰写
【发布时间】：2016-09-26 00:22:12
【问题描述】：

我有一个基于 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 视图模型，其中包含处理事件的所有方法，例如拖放和项目选择。

【问题讨论】：

标签： aurelia

【解决方案1】：

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

树视图节点.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>

【讨论】：