Still working on those jQuery buttons. Trying to update old ASP.Net Webforms using jQuery, Knockout, and Amplify.
New problem today.
I was having problems getting Knockout to enable/disable my jQuery buttons using the Knockout ‘enable’ bindingHandler. It would enable/disable the underlying element that I had run the .button() method on, but it had no idea about the div that jQuery had wrapped my element in, or how to handle it.
I wrote a custom bindingHandler for Knockout to handle this case. It also can handle non-jQuery elements as well, so you could change the declaration from ‘jEnable’ to ‘enable’, and this would work as a all-comers enable function.
Since this method uses jQuery (and is more expensive than the plain old ‘enable’), I figured the extra binding was the best approach.
if (ko && ko.bindingHandlers) {
ko.bindingHandlers['jEnable'] = { 'update': function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var $element = $(element);
$element.prop("disabled", !value);
if ($element.hasClass("ui-button")) {
$element.button("option", "disabled", !value);
}
}
};
}
An example on how to use this:
<input id="btnToEnable" type="button" data-bind="jEnable: isEnabled" />
<script>
$("#btnToEnable").button();
var viewModel = { isEnabled: ko.observable(true) };
ko.applyBindings(viewModel);
</script>
A gist of this code is here.