使用带有knockoutjs的prettyCheckable插件2.1检查数据绑定不起作用

我正在使用prettyCheckable jquery插件使我的复选框和单选按钮看起来很漂亮，如果我使用data-bind =“checked：dateMode”它不起作用，因为插件隐藏了实际的复选框并使它自己覆盖html到漂亮复选框/收音机，因此当我检查收音机或复选框并更新模型中的值时，knockoutjs lib无法识别。 我知道如果我不使用prettyCheckable插件我的代码工作正常，所以不要告诉我我的模型或数据绑定代码搞砸了。 我测试了这个。

https://github.com/arthurgouveia/prettyCheckable

这是我的部分视图代码。

 
Dates
 
  
  to 
 
 
   
 
  

这是我的淘汰模型：

 function searchVm() { var self = this; self.dateMode = ko.observable("All"); self.startSearch = function () { alert(self.dateMode()); }; }; 

我初始化prettyCheckable这样的东西：

 $('input:checkbox').prettyCheckable(); $('input:radio').prettyCheckable(); 

以下是在PrettyCheckable插件修改后呈现的代码，注意输入样式是如何“display：none”：

 
 
   All Available 
 
 
   Range 
 
  to  
 
 
   
 
 
  

Answer 1

Pretty Checkable触发器change复选框上的事件，但Knockout会查找click事件。 这可以通过prettyCheckable.js行的更改来修复。 原版的：

  if (input.attr('checked') !== undefined) { input.removeAttr('checked').change(); } else { input.attr('checked', 'checked').change(); } 

更改：

  if (window.ko) { ko.utils.triggerEvent(input[0], 'click'); } else { input.click(); } 

如果使用jQuery的click触发器function，Knockout也将无效。 您必须使用如上所述的Knockout的triggerEvent 。

jsFiddle： http ： //jsfiddle.net/mbest/4cX48/

Answer 2

这里没有错。 Pretty Checkable库就是这样的。

它找到输入dom隐藏它们并放置动态a和标签标签而不是那个输入。 如果要查找是否检查了输入，则需要检查动态添加标记的类（Class =“checked”）。 不是原始输入标记。

您需要为prettycheckable编写绑定并观察标记的类。 然后根据标记的类更改绑定的选中值。

http://knockoutjs.com/documentation/custom-bindings.html

Answer 3

@Michael对prettyCheckbox的修改大部分都有效，但是如果你的viewModel在加载时已经有了选择，那么prettyCheckbox将无法识别它，因为它正在寻找“checked” 属性，而knockout / plain vanilla html会将复选框标记为通过财产 。

在prettyCheckbox中更改：

 var isChecked = el.attr('checked') !== undefined ? 'checked' : ''; 

至

 var isChecked = el.prop('checked') == true ? 'checked' : ''; 

此外，重要的是要知道如果你在代码中修改你的knockout viewmodel属性，它将不会反映在prettyCheckbox中，因为我不知道如何订阅（在javascript中，而不是淘汰）属性的更改。