使用带有knockoutjs的prettyCheckable插件2.1检查数据绑定不起作用 [英] using prettyCheckable plugin with knockoutjs 2.1 checked data-binding doesn't work
问题描述
我正在使用prettyCheckable jquery插件使我的复选框和单选按钮看起来很漂亮,如果我使用data-bind =checked:dateMode它不起作用,因为插件隐藏了实际的复选框并使其自己的覆盖html来复选复选框/收音机,因此当我检查收音机或复选框并更新模型中的值时,knockoutjs lib无法识别。我知道如果我不使用prettyCheckable插件我的代码工作正常,所以不要告诉我我的模型或数据绑定代码搞砸了。我对此进行了测试。
I am using the prettyCheckable jquery plugin to make my checkboxes and radio buttons look pretty and if I use the data-bind="checked: dateMode" it doesn't work because the plugin hides the actual checkbox and makes it's own override html to pretty up the checkbox/radio, therefore the knockoutjs lib doesn't recognize when I check the radio or checkbox and update the value in the model. I know my code works fine if I don't use prettyCheckable plugin, so don't tell me my model or data binding code is messed up. I tested this.
https://github.com/ arthurgouveia / prettyCheckable
这是我的部分查看代码。
Here is my partial view code.
<div id="DatesChooser" class="span5 pull-left">
<h4><i class="icon-calendar"></i>Dates</h4>
<input type="radio" name="Date" value="All" data-label="All Available" data-bind="checked: dateMode" /><br />
<input type="radio" name="Date" value="Range" data-label="Range" data-bind="checked: dateMode" />
<div data-bind="visible: dateMode() == 'Range'">
<input type="text" id="FromYear" placeholder="1970" /> to
<input type="text" id="ToYear" placeholder="2012" /><br />
<div id="Date-Slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div id="Date-Slider-Bar" class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
</div>
</div>
</div>
这是我的淘汰模特:
function searchVm() {
var self = this;
self.dateMode = ko.observable("All");
self.startSearch = function () { alert(self.dateMode()); };
};
我初始化了像这样的prettyCheckable:
And I initialize the prettyCheckable stuff like this :
$('input:checkbox').prettyCheckable();
$('input:radio').prettyCheckable();
这是代码在PrettyCheckable插件修改后呈现的内容,请注意输入样式是如何'display:none':
Here is what the code gets rendered as after the prettyCheckable plugin modifies it, notice how the input style is 'display:none' :
<div id="DatesChooser" class="span5 pull-left">
<div class="clearfix prettyradio labelright blue">
<input type="radio" data-bind="checked: dateMode" data-label="All Available" value="All" name="Date" style="display: none;" checked="checked">
<a class="checked" href="#"></a>
<label for="undefined">All Available</label>
</div>
<br>
<div class="clearfix prettyradio labelright blue">
<input type="radio" data-bind="checked: dateMode" data-label="Range" value="Range" name="Date" style="display: none;">
<a class="" href="#"></a>
<label for="undefined">Range</label>
</div>
<div data-bind="visible: dateMode() == 'Range'" style="display: none;">
<input id="FromYear" class="placeholder" type="text" placeholder="1970">
to
<input id="ToYear" class="placeholder" type="text" placeholder="2012">
<br>
<div id="Date-Slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div id="Date-Slider-Bar" class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;" href="#"></a>
<a class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;" href="#"></a>
<div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
</div>
</div>
</div>
推荐答案
漂亮的可检查触发器更改
复选框上的事件,但Knockout查找单击
事件。这可以通过更改 prettyCheckable.js
第46-54行来修复。原文:
Pretty Checkable triggers change
events on the checkboxes, but Knockout looks for click
events. This can be fixed with a change in prettyCheckable.js
lines 46-54. Original:
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的,Knockout也行不通单击
触发器功能。您必须使用Knockout的 triggerEvent
,如上所述。
Knockout also won't work if you use jQuery's click
trigger function. You must use Knockout's triggerEvent
as above.
jsFiddle: http://jsfiddle.net/mbest/4cX48/
jsFiddle: http://jsfiddle.net/mbest/4cX48/
这篇关于使用带有knockoutjs的prettyCheckable插件2.1检查数据绑定不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!