淘汰赛foreach将行号添加到网格中

Question

我有这个网格填充数组中的数组。 它根据一个数组创建，然后用另一个数组填充该列。

 <div id="formula" data-bind="with:currentFormula">
        <!-- ko foreach:$parent.tones-->
        <div class="col-sm-2" data-bind="foreach:$parents[1].levels">
            <a href="#" class="thumbnail img-responsive" data-bind="click: $root.hasCurrent() ? $root.currentFormula().setEnding.bind($index(),$parentContext.$index())  : $root.currentFormula().setStarting.bind($index(),$parentContext.$index())">
                <img data-bind="attr:{ src: '/Content/images/colors/' +  $index() +  $parentContext.$index() + '.png' }" alt="" />
            </a>
        </div>
        <!-- /ko-->
    </div>

我需要做的是在col 1之前创建一个新列并添加$ index（）+ 1，否则行号将适用于该列。

我看了一遍，但没有发现任何可行的东西。

我该怎么做？

Answer 1

据我所知，您的行是根据currentFormula.tones中的<!-- ko foreach:$parent.tones-->和基于tones.levels的列创建的。因此，您应该创建div，仅在第一个$index() + 1（列）时将其文本绑定到level。为此，您需要移动循环以创建代表列的div以上的列。

这样的事情：

<div id="formula" data-bind="with: currentFormula">
    <!-- ko foreach:$parent.tones-->
        <!-- ko foreach:$parents[1].levels -->
            <!-- If this is the first level/column, then create a new column to show rownum  -->
            <div class="col-sm-2" data-bind="if: $index() == 0, text: 'Row ' + $parent.$index() + 1"></div>
            <!-- Normal column creation -->
            <div class="col-sm-2" >
                <a href="#" class="thumbnail img-responsive" data-bind="click: $root.hasCurrent() ? $root.currentFormula().setEnding.bind($index(), $parentContext.$index()) : $root.currentFormula().setStarting.bind($index(), $parentContext.$index())">
                    <img data-bind="attr: { src: '/Content/images/colors/' + $index() + $parentContext.$index() + '.png' }" alt="" />
                </a>
            </div>
        <!-- /ko-->
    <!-- /ko-->
</div>