如何在 knockout.js css-binding 中添加“点击”条件？

Question

knockout.js中css-binding的文档提供了一个示例如下：

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>

  <script type="text/javascript">
   var viewModel = {
    currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class
};
   viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>

这个例子似乎应用了“profitWarning” currentProfit 是负数。我想稍微改变一下，并在单击 div 时应用此类。如何将“单击”条件应用于此示例？另外，我想制作多个 div 并一次只应用一个样式（单击 div 时应用样式，单击另一个 div 时将其删除）

谢谢

Answer 1

您可以使用点击绑定。

click 绑定添加了一个事件处理程序，以便在单击关联的 DOM 元素时调用您选择的 JavaScript 函数。这最常用于按钮、输入和 a 等元素，但实际上适用于任何可见的 DOM 元素

http://knockoutjs.com/documentation/click-binding.html

这是一个例子：

function viewModel() {
  var self = this;
  self.isSelected = ko.observable(false);
  self.className = ko.pureComputed(function(){
    return self.isSelected()? "SelectedClass" : "NotSelectedClass";
  }, self);
  self.change = function() {
    self.isSelected(!self.isSelected());
  }
}

ko.applyBindings(new viewModel()); 

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

<div data-bind="text: className"></div> <br/>
<div data-bind="css: className">Inspect this Div</div> <br/>
<input type="button" data-bind="click: change" value="Toggle" />

对于您的第二个问题，您可以为每个 div 提供几个布尔值以检查单击了哪个，将用户单击的设置为 true，然后将其余设置为 false。