Prevent "with" binding from removing DOM elements (Knockout.js)

Question

Knockouters,

I have come to rely on the with binding for establishing context nesting. while I like the way KO manipulates the DOM based on the state of the bound elements in some instances, sometime I just want the binding implications without the DOM removal.

Does anyone know if it is possible way to prevent the DOM manipulation on an individual element binding level?

Thanks, Vinney

Answer 1

Version 2.2+ of Knockout won't clear the DOM element when with is bound initially to an object (or other truthy value). Alternatively, you can use the withlight binding that I put together some time ago. It only will bind to an object (not an observable).

ko.bindingHandlers['withlight'] = {
    'init': function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var bindingValue = valueAccessor();
        if (typeof bindingValue != 'object' || bindingValue === null)
            throw new Error('withlight must be used with an object');
        var innerContext = bindingContext['createChildContext'](bindingValue);
        ko.applyBindingsToDescendants(innerContext, element);
        return { 'controlsDescendantBindings': true };
    }
};