3

まずはメリークリスマス！

彼らがノックアウトの専門家であり、本当に私を助けたいという衝動を感じていない限り、他の誰もクリスマスに取り組んでいないことを願っています;-)

私はすばらしいjQuery 列ナビゲーション プラグインを使用して、ユーザーに複数列の方法でデータを表示しています。私の静的テストでは問題なく動作しましたが、現在は製品コードに実装しており、解決するのがそれほど難しくないことを願っています。

リストが大きくなったときにスクロールできるようにするには、ul 要素内に div が必要です。ここでの問題は、列を作成するために使用している foreach が、子コレクション全体ではなく、各子要素を div でラップすることです。

例えば：

このようなHTMLを生成する必要があります

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

私は次のようなHTMLになります

<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 を取得するにはどうすればよいですか??

助けてくれてありがとう、そしてメリークリスマスをもう一度。

4

1 に答える 1

9

最初のコメントは正しいです...これを行うだけで、目的の HTML 出力を生成できます。

 <ul>
     <div data-bind="foreach: { data: Column3 }">
         <li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
     </div>
 </ul>

adivに直接 aulを含めることは正確には有効な HTML ではありませんが、とにかくそれを行う理由がわかりません。

別の方法は、仮想要素を使用することです。

 <ul>
     <div>
         <!-- ko foreach: { data: Column3 } -->
             <li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
         <!-- /ko -->
     </div>
 </ul>

コメントで言及したように、「スクリプト」を変更せずに目的の出力を取得する (良い) 方法はありません。

于 2012-12-25T07:23:35.917 に答える