Radio Button Custom Click binding using knockout

Radio Button Custom Click binding using knockout

by Keyur Patel

HTML

Is Safe:
<input type="checkbox" data-bind="checked: isSafe" />
<a id="myAnchor" href="#" data-bind="safeClick: activateItem.bind($data, 'hello world'), condition: isSafe">Activate</a>
<a id="myAnchor2" href="#" data-bind="click: activateItem.bind($data, 'hello world')">Activate</a>

JavaScript

ko.bindingHandlers.safeClick = {
    'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var originalFunction = valueAccessor();
        var newValueAccesssor = function() {
            return function () {
                if (ko.utils.unwrapObservable(allBindingsAccessor().condition))
                    originalFunction.apply(viewModel, arguments);
            }
        }
        ko.bindingHandlers.click.init(element, newValueAccesssor, allBindingsAccessor, viewModel, bindingContext);
    }
}

var vm = {
    isSafe: ko.observable(true),
    activateItem: function (text, context, event) {
        alert(text + ' from ' + event.currentTarget.getAttribute('id'));
    }
}

ko.applyBindings(vm);