多个活动的＆＃34;页面＆＃34;使用Aurelia？

Question

使用Aurelia，有没有办法让多个动态加载的页面＆＃34; （组件，也许）一次活动？就像Azure的仪表板具有从左到右的功能流程一样。请看这个小提琴来说明我的意思：https://jsfiddle.net/eqr53dc0/2/

更新

我可以使用<compose repeat.for="panel of panels" view-model.bind="panel"></compose>完成此操作，并使用需要显示的面板在我的视图模型上加载panels。如果这是不好的形式，请告诉我！

每个＆＃34;小组＆＃34;在任何给定时间都是活跃/可用的。我只是不确定如何使用Aurelia来构建它。

HTML

<header>header</header>
<div id="content">
  <div class="panel">
    <p>This is a panel, or a "page". Some action within this panel will spawn the panel to the right.</p>
    <button>continue</button>
  </div>
  <div class="panel hidden">
    <p>This is a panel, or a "page". Some action within this panel will spawn the panel to the right.</p>
    <button>continue</button>
  </div>
  <div class="panel hidden">
    <p>This is a panel, or a "page". Some action within this panel will spawn the panel to the right.</p>
    <button>continue</button>
  </div>
</div>
<footer>footer</footer>

CSS

body {
  color: #fff;
}

header,
footer {
  margin: 0;
  padding: 20px;
  background-color: #333;
}

#content {
  background-color: #666;
}

.panel {
  display: inline-block;
  width: 200px;
  height: 300px;
  margin-right: 10px;
  padding: 20px;
  background-color: #501136;
}

.panel.hidden {
  display: none;
}

的JavaScript

$("button").click(function () {
    var $this = $(this);
    var $parent = $this.parent();

    $parent.next().removeClass("hidden");
});