の代わりにテンプレートを使用する

Question

私はAureliaバインディングに基づいてツリービューを持っており、それは正常に動作します。

通常のビューとビューモデルを持つTreeViewというコンポーネントがあります。

次にTreeViewが再帰的に使用する別のビューTreeViewNode.htmlがあります。

<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を使用するのではなく、TreeViewNodeをカスタム要素にする必要があります。

カスタム要素に変換する際の問題は、ドラッグアンドドロップやアイテム選択などのイベントを処理するすべてのメソッドを含むTreeViewビューモデルが失われることです。

Answer 1

バインディングを使用して、カスタム要素に必要なビューモデルの部分を渡すことができます。

ツリービュー-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>