javascript - knockout ，CSS 动态和条件绑定(bind)

Question

我不想通过 css 绑定(bind)添加条件 css 类和动态 css 类。

像这样:

data-bind="css: {$data.something() : true, open : showOpen()  }"

Answer 1

最清楚的可能是将它们组合在一个计算中:

function ViewModel() {
  var self = this;
  
  self.something = ko.observable("danger");
  self.showOpen = ko.observable(true);
  
  self.cssClass = ko.computed(function() {
    return self.something() + (self.showOpen() ? " open" : "");
  });
}

ko.applyBindings(new ViewModel());

div { padding: 10px; }
.danger { background-color: orange; }
.open { border: 5px solid gray; border-width: 5px 5px 0; }

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

<div data-bind="css: cssClass"> my div with class: <code data-bind="text: cssClass"></code> </div>
<hr>
<label><input type="checkbox" data-bind="checked: showOpen"> showOpen</label>
<br>
<input type="text" data-bind="value: something, valueUpdate: 'afterkeydown'">

允许您对整个事物进行单元测试，并保持您的 View 简洁。