How to implement a switcher/viewstack component with slot?

Asked By: Anonymous

I’m trying to implement a ‘switcher’ or ‘viewstack’ component in Aurelia, this would be useful for wizards, paged content, and stepping through a list of tasks. This would show a single child component at a time from a number of possible children. I’d like the usage markup to resemble:

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

Now, the obvious alternatives here are:

  1. <compose view-model.bind="currentStep"> and point the currentStep variable to each component at a time.
    (+ves: components are only instantiated when accessed, -ves: needing to know the path for each component, all children need to be valid view-models)
  2. Add an if.bind='active' within the definition of each component in the slot, and just set this active member from the my-switcher class. (+ves: easier to follow, -ves: components need to be specifically written for use here).
  3. Retrieve the children via @children (if this now works reliably?) and add the Element as a child DOM element manually, then call ViewCompiler.enhance. (-ves: can’t seem to get get @children to work, larger amount of custom code)

Each of these feels a bit contrived a solution. Does anyone have any idea about whether there a cleaner approach that could/should be used instead?


Solution

Answered By: Anonymous

Combine options 2 and 3 while avoiding the negatives (not sure why you can’t get @children to work).

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>

my-switcher-item.js

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

my-switcher-item.html

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

my-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.
}
techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno