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