Question

这是一个复选框问题。我有一个在viewModel函数中定义的布尔Knockout observable：

self.upNeededCB = ko.observable(false);

（当然还有applyBindings）

使用html中的语义UI类：

<div class="ui toggle checkbox upCB">
    <label> Needed</label>
    <input  type="checkbox" data-bind="checked:upNeededCB"  >
</div>

但是当我点击切换时，UI会发生变化，但是它没有反映在Knockout observable中，我正在使用alert(ko.toJSON(self));进行检查。

我需要做什么才能让UI连接到淘汰赛数据？

更新：出于某种原因，调用$(.ui.checkbox).checkbox();似乎是罪魁祸首。

Answer 1

您需要更改input和label的顺序，然后一切正常：

$(function() {
  var ViewModel = function() {
    var self = this;
    self.upNeededCB = ko.observable(false);
  }

  ko.applyBindings(new ViewModel);
});

label { cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<div class="ui toggle checkbox upCB">
  <input type="checkbox" data-bind="checked:upNeededCB">
  <label>Needed</label>
</div>

<hr> Debug info: <pre data-bind="text: ko.toJSON($root)"></pre>

语义ui复选框不会更改knockout数据绑定值

1 个答案: