SO - Knockout.js + Virtual Templates with Options

http://stackoverflow.com/questions/8787236/knockoutjs-rendering-a-table-with-multiple-templates-and-variable-number-of-colu

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<table>
    <thead>
    </thead>
    <tbody>
        <!-- ko foreach: items -->
        <tr><td>row - <b><span data-bind="text: name"></span></b></td></tr>
       
            <!-- ko templateWithOptions: { name: 'tmpl', foreach: items, templateOptions: { flag: 'template' } } -->
            <!-- /ko -->
            
        <!-- /ko -->        
    </tbody>
</table>
<hr/>

<script id="tmpl" type="text/html">
    <tr>
        <td>
            <span> subrow - <span data-bind="text: name"></span></span>
            <span data-bind="text: flag"></span>
        </td>

        <!-- ko with: $parent.$item -->

            <!-- ko templateWithOptions: { name: 'tmpl2', foreach: items, templateOptions: { flag: 'template' } } -->
            <!-- /ko -->            
        
        <!-- /ko -->
    </tr>
</script>


<script id="tmpl2" type="text/html">
        <span data-bind="text: name"></span>
        <!-- ko with: $parent.$item -->
             <span data-bind="text: flag">                

            </span>
        <!-- /ko -->
</script>

JavaScript

ko.bindingHandlers.templateWithOptions = {
    init: ko.bindingHandlers.template.init,
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        //if options were passed attach them to $data
        if (options.templateOptions) {
           context.$data.$item = ko.utils.unwrapObservable(options.templateOptions);
        } 
        //call actual template binding
        ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, context);
        //clean up
        delete context.$data.$item;
    } 
}

function Item(id, name) {
   this.id = id;
   this.name = ko.observable(name);  
}

var viewModel = {
    items: ko.observableArray([new Item(1, "one"), new Item(2, "two"), new Item(3, "three")])
};

viewModel.items2 = ko.observableArray([new Item(1, "one"), new Item(2, "two"), new Item(3, "three")]);

//ko.virtualElements.allowedBindings['templateWithOptions'] = true;
//i commented the upper line beacuse it works for me with this line under
ko.allowedVirtualElementBindings['templateWithOptions'] = true;

ko.applyBindings(viewModel);