Knockout foreach binding unordered list

问题

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 &amp; 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><a href="./page2.1/">Page 2.1</a></li>
                            <li><a href="./page2.2/">Page 2.2</a></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 &amp; 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><a href="./page2.1/">Page 2.1</a></li>
                            </div>
                            <div>
                                <li><a href="./page2.2/">Page 2.2</a></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.

回答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.

来源：https://stackoverflow.com/questions/14027670/knockout-foreach-binding-unordered-list