Wie man Vorlage verwendet anstatt zu komponieren

Question

Ich habe eine TreeView basierend auf Aurelia Bindung und es funktioniert gut.

Es gibt eine Komponente namens TreeView mit der üblichen Ansicht und Viewmodel.

Ich habe dann eine andere Ansicht TreeViewNode.html, die die TreeView rekursiv verwendet.

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

Das funktioniert alles. Ich möchte jedoch den TreeViewNode in ein benutzerdefiniertes Element umwandeln, anstatt einfach compose zu verwenden, das das übergeordnete Ansichtsmodell erbt.

Das Problem beim Umwandeln in ein benutzerdefiniertes Element besteht darin, dass es das TreeView-Ansichtsmodell verliert, das alle Methoden zum Verarbeiten von Ereignissen wie Ziehen und Ablegen und Elementauswahl enthält.

Answer 1

Sie können Bindes verwenden, um die vom benutzerdefinierten Element benötigten Teile des Ansichtsmodells zu übergeben.

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