Javascript 如何在Aurelia repeat.for中将class.bind条件从视图移动到模型

在实现class.bind时，我偶然发现了一个问题（至少我认为这是一个问题），我真的不喜欢视图中有太多的逻辑，并考虑转移到组件的模型，但这似乎很棘手。我正在实施step进度条

<template >
  <ul class="all-steps">
    <li repeat.for="step of steps" class.bind="current === step ? 'active': (previous.indexOf(step) >= 0 ? 'done':'')">${$index + 1}</li>
  </ul>
</template>

${$index+1}

---

有什么方法可以将所有这些类分配逻辑移动到视图中吗？我试图用脏绑定创建一个绑定函数，但显然从视图中传递

步骤

会导致

非故意拒绝异常

任何建议都值得赞赏

您只需编写一个包含各种参数的函数即可。最好的部分是，这不会触发脏检查。Aurelia仅在参数值更改时调用该函数

这里有一个例子：

app.html

步骤1:${$index+1}（${calculateClass（当前，步骤）}）

app.js

导出类应用程序{
电流=3；
步骤=[1,2,3,4,5]；
先前=[1,2]；
calculateClass（当前，阶跃）{
console.log（`called.current=${current}，step=${step}`）
如果（当前===步进）{
返回“活动”；
}else if（此.previous.indexOf（步骤）>=0）{
返回“完成”；
}否则{
返回“”；
}
}
}

index.html

奥雷利亚
李{
背景颜色：绿色；
}
李：很活跃{
背景颜色：黄色；
}
李：好了{
背景色：红色；
}
加载。。。
需要（['aurelia-bootstrapper']）；

非常感谢。我唯一缺少的是触发函数的时间：）