If statement 敲除JS：条件开关情况

我当前的任务是将knockout js conditional if替换为switch case（或者类似于multiple if case），以检查两个以上的条件。这种情况是，如果用户经过身份验证，则切换图标应为绿色，对于未经身份验证的用户，切换图标应为灰色。下面是我在这里提到的场景的代码，IsAuthenticatedUser（）是一个bool值，它总是有true或false。现在我必须将bool（01）值更改为flag（0123）值

对于bool值，敲除JS条件分隔如下：

<!-- ko if: IsAuthenticatedUser() -->
<i class="fa fa-toggle-on faIcons green" title="Active"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

<!-- ko if: !IsNotAuthenticatedUser() -->
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

对于标志值，我必须做如下操作

<!-- ko if: UserFlag == 1 -->
<i class="fa fa-toggle-on faIcons green" title="Active"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

<!-- ko if: UserFlag == 0 -->
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

<!-- ko if: UserFlag == 2 -->
<!-- No ICON -->
<!-- /ko -->

<!-- ko if: UserFlag == 2 -->
<!-- No ICON -->
<!-- /ko -->

但这不起作用，所以有没有其他方法可以使用if进行多条件检查，或者我们如何使用用户切换控件来处理此场景

---

任何建议都会很有帮助。

您的

ko if:UserFlag

应该可以工作，尽管我会将其更改为UserFlag，您可能需要将其设置为

ko if:UserFlag（）

另外，为什么不保持简单，创建一个getAuthClass（）函数，绑定元素属性并计算viewModel中的所有图标？

而不是4

我会将逻辑移到视图模型

根据我的经验，视图中的逻辑越少越好

将逻辑移动到视图模型允许您对自己的行为进行单元测试，而测试视图渲染是很困难的。此外，由于必须使用详细的语法，例如

或complex

数据绑定，因此复杂视图的可读性往往远远低于复杂视图模型

我试图制作一个与您的需求相匹配的简化示例，其中相同的模板根据用户的状态显示不同。为了做到这一点，我利用了

单击页面以更改用户的状态


var myVM=function（）{
var_this=这个；
_此状态=可观察的ko（2）；
_this.authenticationStyle=ko.computed（函数（）{
如果（_this.status（）==0）返回“匿名”；
如果（_this.status（）==1）返回“过期”；
返回“已验证”；
}，这个）；
_this.statusText=ko.computed（函数（）{
如果（_this.status（）==0）返回“请登录”；
如果（_this.status（）==1）返回“请刷新”；
返回“欢迎”；
}，这个）；
};
var vm=新的myVM（）；
ko.应用绑定（vm）；
window.onclick=function（）{
var newStatus=vm.status（）+1；
如果（新闻状态>2）
newStatus=0；
虚拟机状态（newStatus）；
};
.anonymous{
显示：无；
}
.过期{
颜色：浅灰色；
背景颜色：黄色；
}
.认证{
颜色：黑色；
背景颜色：绿色；
}

应该可以-如果：UserFlag（）
您需要
ko吗？您的控制台怎么说？请包含足够的代码，例如一些视图模型代码。否则，我们必须猜测出什么地方出了问题。所有好的和合理的评论，尽管作为回答，它只是猜测了一下OP的上下文。
ko if:userFlag（）
这是有效的。伟大的感谢@brianlmerrittOne小错误（不会很快显示，因为您通常只有一个
myVM
）的实例，但仍然需要注意的是，观测值将在多个实例之间共享。看看这个bug，还有一些建议的修改。哦，是的，很明显。抢手货
<!-- ko if: UserFlag == 1 -->
<i class="fa fa-toggle-on faIcons green" title="Active"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

<!-- ko if: UserFlag == 0 -->
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

<!-- ko if: UserFlag == 2 -->
<!-- No ICON -->
<!-- /ko -->

<!-- ko if: UserFlag == 2 -->
<!-- No ICON -->
<!-- /ko -->