0

我正在尝试在 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：组件仅在访问时实例化，-ves：需要知道每个组件的路径，所有子组件都需要是有效的视图模型）
  2. if.bind='active'在 中的每个组件的定义中添加一个，然后从类中slot设置这个成员。（+ves：更容易理解，-ves：需要专门编写组件才能在此处使用）。activemy-switcher
  3. 通过@children 检索子元素（如果这现在可靠吗？）并手动将元素添加为子 DOM 元素，然后调用ViewCompiler.enhance. （-ves：似乎无法让@children 工作，大量的自定义代码）

这些中的每一个都感觉有点人为的解决方案。有没有人知道是否可以/应该使用更清洁的方法？

4

1 回答 1

1

结合选项 2 和 3，同时避免负面因素（不知道为什么你不能让 @children 工作）。

消费者.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>

我的切换器.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.
}
于 2016-11-30T18:25:33.533 回答