Knockout Non-Boolean Attribute Custom Binding

by nathanjones

HTML

<input data-bind="toggleAttr: { attr: 'autofocus', param: focusMe }, value: focusMe" />

<button data-bind="click: toggleFocusMe">Toggle Focus</button>

JavaScript

ko.bindingHandlers.toggleAttr = {    
    update: function (element, valueAccessor) {    
        var options = ko.utils.unwrapObservable(valueAccessor());
        var attr = ko.utils.unwrapObservable(options.attr);
        var param = ko.utils.unwrapObservable(options.param);
    
        param ? element.setAttribute(attr, attr) : element.removeAttribute(attr);        
    }
};


var ViewModel = function(){
    var self = this;
    this.focusMe = ko.observable(true);
    this.toggleFocusMe = function(){
        self.focusMe() ? self.focusMe(false) : self.focusMe(true);
    }
};

ko.applyBindings(new ViewModel);