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