Skip to content

Instantly share code, notes, and snippets.

@revocengiz
Forked from ivanovvitaly/knockout.bindings.js
Created March 7, 2016 19:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save revocengiz/05450f41a4655b4ab337 to your computer and use it in GitHub Desktop.
Save revocengiz/05450f41a4655b4ab337 to your computer and use it in GitHub Desktop.
My simple and usefull knockout binding handlers I always use
// Requires BlockUI
ko.bindingHandlers.blockUI = {
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var isEnabled = ko.unwrap(valueAccessor()) || false;
if (isEnabled) {
$(element).block();
}
else {
$(element).unblock();
}
}
};
ko.bindingHandlers.href = {
update: function(element, valueAccessor, allBindings, data, context) {
ko.bindingHandlers.attr.update(element, function() {
return { href: valueAccessor() }
});
}
};
// Requires accounting.js
ko.bindingHandlers.currency = {
update: function (element, valueAccessor, allBindings) {
ko.bindingHandlers.text.update(element, function() {
return accounting.formatMoney(valueAccessor());
});
}
};
// Requires Bootstrap Switch
ko.bindingHandlers.bsSwitch = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
$(element).on('switchChange.bootstrapSwitch', function (e, state) {
var value = valueAccessor();
value(state);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).bootstrapSwitch("destroy");
});
ko.bindingHandlers.checked.init(element, valueAccessor);
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var currentValue = ko.unwrap(valueAccessor());
$(element).bootstrapSwitch('state', currentValue, true);
}
};
/*http://eonasdan.github.io/bootstrap-datetimepicker*/
ko.bindingHandlers.bsDatePicker = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var options = ko.unwrap(valueAccessor());
$.extend(options, { pickTime: false });
var dateValueObserver = allBindings().dateValue;
$(element).datetimepicker(options);
$(element).on('dp.change', function (e) {
$(element).data("DateTimePicker").hide();
dateValueObserver(moment(e.date).format(options.format));
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datetimepicker("destroy");
});
}
};
/*http://eonasdan.github.io/bootstrap-datetimepicker*/
ko.bindingHandlers.bsTimePicker = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var options = ko.unwrap(valueAccessor());
$.extend(options, { pickDate: false, useStrict: true, useSeconds: false });
var timeValueObserver = allBindings().timeValue;
$(element).datetimepicker(options);
$(element).on('dp.change', function (e) {
$(element).data("DateTimePicker").hide();
timeValueObserver(moment(e.date).format(options.format));
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datetimepicker("destroy");
});
}
};
ko.bindingHandlers.bsTooltip = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var local = ko.utils.unwrapObservable(valueAccessor()),
options = {};
ko.utils.extend(options, ko.bindingHandlers.bsTooltip.options);
ko.utils.extend(options, local);
$(element).tooltip(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).tooltip("destroy");
});
},
options: {
placement: "right"
}
};
ko.bindingHandlers.bsModal = {
init: function(element, valueAccessor) {
$(element).modal({
show: false,
keyboard: false
});
var value = valueAccessor();
if (ko.isObservable(value)) {
$(element).on('hide.bs.modal', function () {
value(false);
});
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).modal("destroy");
});
},
update: function (element, valueAccessor) {
var show = ko.unwrap(valueAccessor());
$(element).modal(show ? 'show' : 'hide');
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment