淘汰赛foreach绑定无序列表 [英] Knockout foreach binding unordered list

问题描述

首先，圣诞快乐！

希望没有人在圣诞节那天工作，除非他们是淘汰赛专家，并且真的感到有帮助我的渴望；-)

Hopefully no one else is working on xmas day unless they're knockout experts and really feel the urge to help me out ;-)

我正在使用神话般的 jQuery列导航插件来显示数据以多列的方式向我的用户展示.在我的静态测试中，它运行良好，但是现在将其实现到生产代码中，我发现了一些希望不太难整理的东西.

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.

它需要在ul元素内包含一个div，以便在列表变大时进行滚动.这里的问题是，我用来创建列的foreach将每个子元素包装在div中，而不是整个子集合中.

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.

例如:

我应该生成看起来像这样的HTML

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>

但使用此剔除代码

<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>

我最终得到的是

<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>

如何获取内部DIV来包装所有子级而不是父级内部的单个子级记录?

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.

推荐答案

第一个注释是正确的...您只需执行此操作即可产生所需的HTML输出:

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>

尽管直接在ul中包含div并不是完全有效的HTML，所以我不知道您为什么仍要这样做.

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.

这篇关于淘汰赛foreach绑定无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！