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

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

我找遍了，没有找到任何有用的东西。

我该怎么做？

Answer 1

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

敲除 foreach 将行号添加到网格

knockout foreach add row number to grid

arrays

knockout-3.0