Knockout单选按钮绑定布尔值

时间:2016-07-27 07:24:09

标签: knockout.js knockout-mapping-plugin

根据我在运行时创建的Fiddle,它不会将值绑定到" no Blue"选项如预期。

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

正如我在那里提到的,当我传递一个字符串值" false"它做绑定。很明显,淘汰赛也会进行类型比较。

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

我试过" checkedValue"仍然没有运气。

2 个答案:

答案 0 :(得分:5)

认为您遇到了一个已在更高版本的淘汰赛中修复过的错误。

应该如何运作(和你尝试过的一样):

<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)
});

如果您包含淘汰赛版本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>

当您包含您在小提琴(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行为的自定义检查绑定(如果版本更新会破坏你的项目)

答案 1 :(得分:2)

埃。内部的src绑定只返回element.value,对于浏览器,它是一个字符串。检查the source file,使用此缩写/注释代码获取与检查相关的值:

var checkedValue = ko.pureComputed(function() {
    // Abbreviated, first KO does some stuff for other cases, but
    // in the end it'll do:

    return element.value; // Where `element` is the actual DOM element.
});

通常情况下,布尔值将由一个复选框表示,您只能在一半的情况下遇到问题(在这种情况下,您需要像&#34; an inverse checked binding&#34; )。

解决方案包括你提到的那个(使用字符串)以及使用可写的计算面向实际的observable,例如:

viewModel.viewIsBlue = ko.computed({
  read: function() { return viewModel.isBlue().toLocaleString(); },
  write: function(newVal) { viewModel.isBlue(newVal === 'true'); }
});

如果您发现自己经常重复上述内容,也可以使用具有类似功能的自定义扩展程序。