lunedì 14 maggio 2012

Custom bindings rulez (again)

Continua l'implementazione di custom bindings per BS/KO (vd. Tre piccioni con un custom binding). Questa volta mi occorreva simulare il comportamento tipico del checkbox/toggle e di un gruppo di radiobuttons utilizzando però i button di BS.
Qui il binding:
/*****************************
** KnockOut Custom Binding for Bootstrap common property .active
** Author: lightwalker
** Usage:
** a)  VM property is a bool -> data-bind="bsActive: [vmpropertyname]" 
**     for example togglebutton (checkbox behavior)
** b)  two parameters -> data-bind="bsActive: {value: [viewvalue], property: [vmpropertyname]}"
**     for example buttons group (radiobuttons behavior)
** http://twitter.github.com/bootstrap/javascript.html#buttons
*******************************/

        ko.bindingHandlers.bsActive = {
            'init': function (element, valueAccessor, allBindingsAccessor) {
                var updateHandler = function () {
                    var valueToWrite = null;
                    var modelValue = null;
                    if (valueAccessor().value != undefined) {
                        modelValue = valueAccessor().property;
                        valueToWrite = ko.utils.unwrapObservable(valueAccessor().value);
                    }
                    else {
                        modelValue = valueAccessor();
                        valueToWrite = !ko.utils.unwrapObservable(modelValue);
                    }


                    if (ko.isWriteableObservable(modelValue) && modelValue !== valueToWrite) {
                        modelValue(valueToWrite);
                    }
                };
                ko.utils.registerEventHandler(element, "click", updateHandler);
            },
            'update': function (element, valueAccessor) {
                    var valueToCompare = null;
                    var modelValue = null;
                    var toToggle = true;
                    if (valueAccessor().value != undefined) {
                        modelValue = ko.utils.unwrapObservable(valueAccessor().property);
                        valueToCompare = ko.utils.unwrapObservable(valueAccessor().value);
                        toToggle = (modelValue.toString() == valueToCompare.toString());
                    }
                    else {
                        toToggle = ko.utils.unwrapObservable(valueAccessor());
                    }
                    $(element).toggleClass('active', toToggle);
                }
       }
E qui il frammento di view:
<!-- int value binding -->
<div class="btn-group">
  <button class="btn" data-bind="bsActive: {value: 0, property: intVMObservable}">Value 0</button>
  <button class="btn" data-bind="bsActive: {value: 1, property: intVMObservable}">Value 1</button>
  <button class="btn" data-bind="bsActive: {value: 2, property: intVMObservable}">Value 2</button>
</div>
<!-- bool value binding -->
<button class="btn" data-bind="bsActive:boolVMObservable">Yes/No</button>

Nessun commento:

Posta un commento