Как использовать шаблон вместо создания

Question

У меня есть TreeView, основанный на привязке Aurelia, и он отлично работает.

Существует один компонент под названием 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

Вы можете использовать связываемые элементы для передачи частей модели представления, необходимых для пользовательского элемента.

дерево-вид-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>