使用帶有擊倒js 2.1的數據綁定的prettyCheckable插件不起作用

Question

我正在使用prettyCheckable jquery插件使我的復選框和單選按鈕看起來很漂亮，如果我使用data-bind =“ checked：dateMode”則它不起作用，因為該插件隱藏了實際的復選框並使其自身覆蓋html成為漂亮的復選框/收音機，因此當我檢查收音機或復選框並更新模型中的值時，knockoutjs庫無法識別。 我知道如果我不使用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>

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觸發功能，則淘汰賽也不起作用。 您必須如上所述使用Knockout的triggerEvent 。

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

Answer 2

這里沒有錯。 Pretty Checkable庫以這種方式工作。

它發現輸入dom隱藏它們，然后放置動態a和label標簽而不是該輸入。 如果要查找是否已檢查輸入，則需要檢查動態添加標簽的類（Class =“ checked”）。 不是原始輸入標簽。

您需要為prettycheckable編寫一個綁定，並觀察標簽的類。 然后根據該標簽的類別更改綁定的檢查值。

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

Answer 3

@邁克爾的修改prettyCheckbox 大部分工作，但如果你的視圖模型已經有了選擇做，當你加載，prettyCheckbox不會承認它，因為它是尋找“選中” 屬性 ，而作為經檢查淘汰賽/普通的香草HTML將迎來復選框財產 。

在prettyCheckbox中更改：

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

至

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

同樣，重要的是要知道，如果您在代碼中修改了剔除viewmodel屬性，它將不會反映在prettyCheckbox中，因為我不知道（在JavaScript中，不是剔除）訂閱屬性更改的方法。