Knockout foreach binding unordered list - html

Question

First off, Merry Christmas!
Hopefully no one else is working on xmas day unless they're knockout experts and really feel the urge to help me out ;-)
I'm using the fabulous jQuery Column Navigation Plugin to show data to my users in a multi column fashion. It worked fine in my static testing, but now implementing it into production code I've hit something that hopefully isn't too difficult to sort out.
It requires a div inside a ul element to allow for scrolling when the list gets to big. The problem here is that the foreach I'm using to create the columns wraps each child element in a div and not the entire child collection.
For example:
I should be producing HTML that looks like this
<div id="myTree">
<ul>
<div> <!-- required to allow scrolling within each column -->
<li>
<a>Homepage</a>
<ul>
<div>
<li><a>Contact</a></li>
<li><a>Terms & Conditions</a></li>
<li><a>Privacy information</a></li>
</div>
</ul>
</li>
<li>
<a>Contents</a>
<ul>
<div>
<li><a>Page 1</a></li>
<li>
<a>Page 2</a>
<ul>
<div>
<li>Page 2.1</li>
<li>Page 2.2</li>
</div>
</ul>
</li>
<li><a>Page 3</a></li>
</div>
</ul>
</li>
</div>
</ul>
but using this knockout code
<div id="whatever" style="width: 100%">
<ul data-bind="foreach: { data: Column1 }">
<div>
<li><a data-bind="text: Name"></a>
<ul data-bind="foreach: { data: Column2 }">
<div>
<li><a data-bind="text: Name"></a>
<ul data-bind="foreach: { data: Column3 }">
<div>
<li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
</div>
</ul>
</li>
</div>
</ul>
</li>
</div>
</ul>
I end up with HTML that looks like
<div id="myTree">
<ul>
<div> <!-- required to allow scrolling within each column -->
<li>
<a>Homepage</a>
<ul>
<div>
<li><a>Contact</a></li>
</div>
<div>
<li><a>Terms & Conditions</a></li>
</div>
<div>
<li><a>Privacy information</a></li>
</div>
</ul>
</li>
<li>
<a>Contents</a>
<ul>
<div>
<div>
<li><a>Page 1</a></li>
</div>
<li>
<a>Page 2</a>
<ul>
<div>
<li>Page 2.1</li>
</div>
<div>
<li>Page 2.2</li>
</div>
</ul>
</li>
<li><a>Page 3</a></li>
</div>
</ul>
</li>
</div>
</ul>
How can I get the internal DIVs to wrapper ALl the children and not individual child records inside the parent??
Many thanks for any help, and MERRY CHRISTMAS once again.

Answer 1

The first comment is correct... you would just do this to produce your desired HTML output:
<ul>
<div data-bind="foreach: { data: Column3 }">
<li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
</div>
</ul>
Although having a div directly in a ul isn't exactly valid HTML, so I don't know why you would want to do that anyways.
An alternative is using virtual elements:
<ul>
<div>
<!-- ko foreach: { data: Column3 } -->
<li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
<!-- /ko -->
</div>
</ul>
There is no (nice) way of getting your desired output without modifying the "script" as you mention in your comment.