Knockout JS：条件开关盒

Question

我目前的任务是替换knockout js conditional if to switch case（或者像multiple if case）来检查两个以上的条件。场景是如果用户已通过身份验证，则切换图标应显示为绿色，对于未通过身份验证的用户，切换图标应为灰色。下面是我在这里陈述的场景的代码，IsAuthenticatedUser() 是一个 bool 值，总是有 true 或 false。现在我必须将 bool(0 1) 值更改为 flag(0 1 2 3) 值。

Bool representation is, 
0 - Not Authenticated - grey icon
1 - Authenticated - green icon

Flag Value
0 - Not Authenticated - grey icon
1 - Authenticated - green icon
2 - Authenticated but expired - no icon
3 - Authenticated but not yet license period started - no icon

对于 bool 值，Knockout 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 -->

对于 Flag 值，我必须执行如下操作，

<!-- 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 进行多条件检查，或者我们如何让用户切换控件来处理这种情况。

任何建议都会有所帮助。

Answer 1

您的 ko if: UserFlag 应该有效，但我会将其更改为 userFlag，您可能需要将其设为 ko if: userFlag()

还有，为什么不简单点，创建一个getAuthClass()函数，绑定元素属性，计算viewModel中的所有图标？

Answer 2

而不是 4  我会改为将逻辑移至视图模型。

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

将逻辑移动到视图模型允许您对您的行为进行单元测试，而很难测试视图呈现。此外，复杂视图的可读性往往远不如复杂视图模型，因为必须使用冗长的语法，例如  或复杂的 data-bind.

我试着做了一个符合您需求的简化示例，其中相同的模板根据用户的状态显示不同。为此，我使用 css binding.

点击页面更改用户状态。

var myVM = function() {
    var _this = this;
    _this.status = ko.observable(2);
  
    _this.authenticationStyle = ko.computed(function() {
      if (_this.status() == 0) return "anonymous";
      if (_this.status() == 1) return "expired";
      return "authenticated";
    }, this);
  
    _this.statusText = ko.computed(function() {
      if (_this.status() == 0) return "please log in";
      if (_this.status() == 1) return "please refresh";
      return "welcome";
    }, this);
};

var vm = new myVM();
ko.applyBindings(vm);

window.onclick = function() {
  var newStatus = vm.status() + 1;
  if (newStatus > 2)
    newStatus = 0;
  vm.status(newStatus);
};

.anonymous {
  display: none;
}
.expired {
  color: lightgrey;
  background-color: yellow;
}
.authenticated {
  color: black;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<div data-bind="css: authenticationStyle">
  <div data-bind="text: statusText"></div>
</div>

Knockout JS：条件开关盒

Knockout JS: Conditional Switch Case

conditional

if-statement

knockout.js