semantic ui 复选框没有改变 knockout 数据绑定值

Question

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

self.upNeededCB = ko.observable(false);

（当然还有 applyBindings）

用语义 UI 类在 html:

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

但是当我单击切换按钮时，UI 会发生变化，但它不会反映在我正在使用 alert(ko.toJSON(self));.

检查的 Knockout 可观察对象中

我需要做什么才能使 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>

semantic ui 复选框没有改变 knockout 数据绑定值

semantic ui checkbox is not changing knockout data-bind value

jquery

knockout.js

semantic-ui