Question

我当前的任务是替换knockout js条件if if切换大小写（或者像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 -->

但是这没有用，所以有另一种方法可以用于多个条件检查或者我们如何使用开关控制来处理这种情况。

任何建议都会有所帮助。

Answer 1

而不是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>

Answer 2

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

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

Knockout JS：条件转换案例

2 个答案: