-
Notifications
You must be signed in to change notification settings - Fork 4
Button convention
Anders Malmgren edited this page Oct 18, 2013
·
8 revisions
All objects of type function can be bound to a button element.
<button data-name="save">Save</button>
The convention will also look for a function guard member on the ViewModel which by convention is prefixed with can
TestViewModel = function() {
var self = this;
this.save = function() {
self.canSave(false);
};
this.canSave = ko.observable(true);
};
Anchor support is not built in to the library because enable and disabling of anchors are not supported by KO, here is a way of doing it
(function() {
//First make KO able to disable clicks on Anchors
var orgClickInit = ko.bindingHandlers.click.init;
ko.bindingHandlers.click.init = function(element, valueAccessor, allBindingsAccessor, viewModel) {
if (element.tagName === "A" && allBindingsAccessor().enable != null) {
var disabled = ko.computed({
read: function() {
return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;
},
disposeWhenNodeIsRemoved: element
});
ko.applyBindingsToNode(element, { css: { disabled: disabled } });
var handler = valueAccessor();
valueAccessor = function() {
return function() {
if (ko.utils.unwrapObservable(allBindingsAccessor().enable)) {
handler.apply(this, arguments);
}
};
};
}
orgClickInit.apply(this, arguments);
};
//Second make the Convention library work with anchors
ko.bindingConventions.conventionBinders.button.rules[0] = function(name, element, bindings, unwrapped, type) {
return (element.tagName === "BUTTON" || element.tagName === "A") && type === "function";
};
})();