CODEWITHSUNDEEP
aurelia
Greg Gum
Greg Gum

Reputation: 37905

How to use template instead of compose

I have a TreeView based on Aurelia binding and it works fine.

There is one component called TreeView with the usual view and viewmodel.

I then have another view TreeViewNode.html which the TreeView uses recursively.

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

This all works. However, I would like to turn the TreeViewNode into a custom element instead of just using compose which inherits the parent view-model.

The issue with turning it into a custom element is that it loses the TreeView view-model which contains all the methods to process events such as drag and drop, and item selection.

Upvotes: 0

Views: 139

Answers (1)

Jeff G
Jeff G

Reputation: 2175

You can use bindables to pass in the parts of the view-model needed by the custom element.

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>

Upvotes: 1

Related Questions