knockout.js - 与 bool 值绑定(bind)的 knockout 单选按钮

Question

根据这个Fiddle我在您运行它时创建的，它没有按预期将值绑定(bind)到“无蓝色”选项。

var viewModel = {    
    isBlue: ko.observable(false)
    //isBlue: ko.observable("false") this works
};

正如我在那里提到的，当我传递一个字符串值“false”时，它会进行绑定(bind)。很明显， knockout 也会进行类型比较。

在我的应用程序中，我使用创建 View 模型的 komapper。对于 boolean 中的属性，它创建 bool 值并初始化 bool 中的变量。 我需要将它们转换为字符串吗？在输入单选按钮元素中，我们将始终使用字符串值。我可以为复选框使用 bool 值吗？

我尝试使用“checkedValue”还是不行。

Answer 1

我认为您遇到的错误已在更高版本的 knockout 中修复。

它应该工作的方式(和您尝试过的一样):

<input name="Test" type="radio" data-bind="checkedValue: true, 
                                           checked: isBlue" />Blue
<input name="Test" type="radio" data-bind="checkedValue: false, 
                                           checked: isBlue" />No Blue

ko.applyBindings({
  isBlue: ko.observable(false)
});

如果你包含 knockout 版本 3.4，它会按预期工作:

ko.applyBindings({
  isBlue: ko.observable(false)
});

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

<label>
  <input name="Test" type="radio" data-bind="checkedValue: true, checked: isBlue" /> Blue
</label>
<label>
  <input name="Test" type="radio" data-bind="checkedValue: false, checked: isBlue" /> No Blue
</label>
<br />
<strong style="color: green">3.4.0: Does work</strong>

当您在 fiddle (2.1.0) 中包含您使用的版本时，它不会:

ko.applyBindings({
  isBlue: ko.observable(false)
});

<script src="https://cloud.github.com/downloads/knockout/knockout/knockout-2.1.0.js"></script>

<label>
  <input name="Test" type="radio" data-bind="checkedValue: true, checked: isBlue" />Blue
</label>
<label>
  <input name="Test" type="radio" data-bind="checkedValue: false, checked: isBlue" />No Blue
</label>
<br />
<strong style="color: red">2.1.0: Does not work</strong>

编辑:经过更多挖掘:我不认为这是 2.1.0 中的错误； checkedValue 那时甚至不存在!

查看源代码，您会注意到获取检查值的逻辑在 2.1.0 和更高版本之间有很大不同:

在 2.1.0 中:

if (element.type == "checkbox") {
  valueToWrite = element.checked;
} else if ((element.type == "radio") && (element.checked)) {
  valueToWrite = element.value;
}

在 3.4.0 中:

 var checkedValue = ko.pureComputed(function() {
   // Treat "value" like "checkedValue" when it is included with "checked" binding
   if (allBindings['has']('checkedValue')) {
     return ko.utils.unwrapObservable(allBindings.get('checkedValue'));
   } else if (allBindings['has']('value')) {
     return ko.utils.unwrapObservable(allBindings.get('value'));
   }

  return element.value;
});

所以一个明确的答案是:更新到 3.4.0，或者创建一个实现 3.4.0 行为的自定义检查绑定(bind)(如果版本更新会破坏您的项目)