Как реализовать компонент Switcher/Viewstack с слотом?

Question

Я пытаюсь реализовать компонент «switcher» или «viewstack» в Aurelia, это было бы полезно для мастеров, постраничного контента и перехода по списку задач. Это покажет один дочерний компонент за раз из числа возможных детей. Я хотел бы разметка использования походить:

<my-switcher> 
    <one-component></one-component> 
    <two-component></two-component> 
    <three-component></three-component> 
</my-switcher> 

Теперь очевидные альтернативы здесь:

1. <compose view-model.bind="currentStep"> и указать переменную currentStep для каждого компонента в то время. (+ ves: компоненты создаются только при доступе, необходимо знать путь к каждому компоненту, все дети должны быть действительными моделями просмотра)
2. Добавить определение if.bind='active' в определение каждого компонента в slot, и просто установите этот элемент active из класса my-switcher. (+ ves: проще следовать, -ves: компоненты должны быть специально написаны для использования здесь).
3. Извлеките детей через @children (если это теперь работает надежно?) И добавьте элемент как дочерний элемент DOM вручную, затем вызовите ViewCompiler.enhance. (-ves: не может показаться, что вы получаете работу @children, больший объем настраиваемого кода)

Каждый из них немного придумал решение. Кто-нибудь имеет представление о том, есть ли более чистый подход, который может/должен использоваться вместо этого?

Answer 1

Объедините варианты 2 и 3, избегая негативов (не уверен, почему вы не можете заставить @children работать).

consumer.html

<my-switcher> 
    <my-switcher-item> 
     <one-component></one-component> 
    </my-switcher-item> 
    <my-switcher-item> 
     <two-component></two-component> 
    </my-switcher-item> 
    <my-switcher-item> 
     <three-component></three-component> 
    </my-switcher-item> 
</my-switcher> 

мой-коммутатор-item.js

export class MySwitcherItem { 
    constructor() { 
     this.isActive = false; 
    } 
} 

мой-коммутатор-item.html

<template show.bind="isActive"> 
    <slot></slot> 
</template> 

мои-switcher.js

import {children} from 'aurelia-framework'; 

export class MySwitcher { 
    @children('my-switcher-item') items = []; 

    // Here you have access to this.items[index].isActive. 

    // You can set this value to true or false from this class 
    // and make sure only one item's isActive is true. 

    // You could add next() and previous() methods to move between 
    // the items, etc. 
}