2

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

https://github.com/arthurgouveia/prettyCheckable

这是我的部分视图代码。

<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 的东西：

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

这是代码在 prettyCheckable 插件修改后呈现的内容，请注意输入样式如何为 '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>
4

3 回答 3

4

Pretty Checkable 会触发change复选框上的事件，但 Knockout 会查找click事件。这可以通过更改prettyCheckable.js第 46-54 行来解决。原来的：

    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触发功能，Knockout 也将不起作用。triggerEvent您必须如上所述使用 Knockout 。

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

于 2013-01-04T20:58:03.710 回答
1

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

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

您需要为 prettycheckable 编写绑定并观察 a 标签的类。然后根据该标签的类更改绑定的检查值。

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

于 2013-01-04T06:12:51.830 回答
0

@Michael 对 prettyCheckbox 的修改大部分都有效，但是如果您的 viewModel 在加载时已经进行了选择，那么 prettyCheckbox 将无法识别它，因为它正在寻找“checked”属性，而敲除/普通香草 html 将通过 a 将复选框标记为选中财产。

在 prettyCheckbox 更改：

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

到

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

此外，重要的是要知道，如果您在代码中修改您的淘汰视图模型属性，它不会反映在 prettyCheckbox 中，因为我不知道订阅（在 javascript 中，而不是淘汰赛）属性更改的方法。

于 2013-03-04T19:37:53.653 回答