KO with test

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="plugin: Test">
    <span data-bind="text: Foo"></span>
</div>

JavaScript

ko.bindingHandlers.plugin = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) 
    {
        try
        {
            ko.unwrap(valueAccessor());
                        
            // Make a modified binding context, with a extra properties, and apply it to descendant elements
            var childBindingContext = bindingContext.createChildContext(bindingContext.$rawData);
            
            ko.applyBindingsToDescendants(childBindingContext, element);
        }
        catch(ex)
        {
            console.log(ex.message);
        }
 
        // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice
        return { controlsDescendantBindings: true };
    }
};

function TestModel()
{
    this.Foo = "Bar";
}

function Model()
{        
}

var m  = new Model();
ko.applyBindings(m);

setTimeout(function() { m.Test = ko.observable(); }, 1000);