與CSS綁定KnockoutJS復選框

Question

我有一個Checkbox，它使用KnockoutJS綁定。 該值將分配給輸入元素，但只有在我手動單擊它時才能看到要選中的復選框。

在幕后輸入元素工作並獲取屬性的檢查值，但因為Im jQuery.uniforms.js為表單提供了一個很好的設計然后我想這就是為什么我沒有在視覺上看到復選框上的檢查。

<div class="inline">
   <input type="checkbox" data-bind='checked: permit.oneDayPermit' />
   <label>One Day Permit</label>
</div>

我使用jQuery.uniforms.js為表單提供了一個很好的設計，所以在檢查checkbox元素時，我可以看到div和span元素被添加到代碼中以使其看起來更好：

<div class="checker">
  <span>
    <input type="checkbox" data-bind="checked: permit.oneDayPermit" value="[object Object]">
  </span>
</div>

當我單擊復選框元素以使其選中時， span元素有一個名為“checked”的類：

<div class="checker">
  <span class="checked">
    <input type="checkbox" data-bind="checked: permit.oneDayPermit" value="[object Object]">
  </span>
</div>

有關如何解決此問題的任何線索，以便復選框將獲得復選標記？

感謝任何幫助。

Answer 1

你可以修補Knockout的內置checked綁定，如下所示：

ko.bindingHandlers.checked.update = (function () {
    var origialUpdate = ko.bindingHandlers.checked.update;
    return function (element, valueAccessor) {
        var parent = element.parentNode,
            checked = ko.unwrap(valueAccessor());

        origialUpdate.apply(this, arguments);

        if (parent.nodeName.toLowerCase() === "span") {
            ko.utils.toggleDomNodeCssClass(parent, "checked", checked);
        }
    };
})();

此代碼段劫持綁定的update處理程序，並在父<span>元素處切換已checked類。 不需要jQuery代碼，Knockout具有所有必需的實用程序功能。

但是，您可以使用jQuery實現更精細的版本。

這樣你的綁定代碼就可以保持不變。

http://jsfiddle.net/5TuTc/

Answer 2

好的，我很確定你可以在綁定中使用KO的函數和方法。 因此，例如在check中你可以添加一個匿名函數來設置它上面的父類。 但您可能希望將已檢查的綁定綁定到ViewModel中的一個函數，該函數可以設置父級和observable。

最后，你可以創建一個bindingHandler來很好地做到這一點。 bindingHandler將是一個自定義操作，最初將應用於綁定數據的任何更改。 因此，當oneDayPermit經歷更改時，將觸發update方法。 bindingHandler將被發送一個對元素（復選框）以及綁定的引用，從這里我們可以使用jQuery來查找它的父span並在其上執行addClass方法。

KO代碼：

    ko.bindingHandlers.prettyCheck = {
        init: function (element, valueAccessor) {
            var value = valueAccessor();
            if (value()) {
                $(element).parent("span").addClass('checked');
            } else {
                $(element).parent("span").removeClass('checked');
            }
        },
        update: function (element, valueAccessor) {
            var value = valueAccessor();
            if (value()) {
                $(element).parent("span").addClass('checked');
            } else {
                $(element).parent("span").removeClass('checked');
            }
        }
    };

    function viewModel() {
        var self = this;
        self.oneDayPermit = ko.observable(false);
    }

    ko.applyBindings(new viewModel(), $("#checkerDiv")[0]);

您的HTML將如下所示：

<div class="checker" id="checkerDiv">
  <span>
    <input type="checkbox" data-bind="prettyCheck: oneDayPermit, checked: oneDayPermit">
  </span>
</div>

這是小提琴： http ： //jsfiddle.net/jLqmc/21/

或者，您可以使用函數而不是直接綁定到observable。 在函數內部（可以傳遞元素的引用），您可以切換observable並執行jQuery操作。 你會看到3個參數，但第一個是我忘了。 它可能是KO作為上下文參考所需要的東西，實際上並不作為參數傳遞。 任何兩個之后的任何東西都是作為參數傳遞的。

<div class="checker" id="checkerDiv">
  <span>
    <input type="checkbox" data-bind="checked: toggleCheck.bind($data, oneDayPermit, $(this))">
  </span>
</div>

在您的VM中

self.toggleCheck= function (binding, element) {
  //Toggle Observable and do your Element stuffs
}

Answer 3

在Permit中加載數據后，添加以下代碼：$（'＃checkerDiv .checkboxes'）。uniform（）;

將類“復選框”或任何其他名稱添加到綁定的所有復選框。