KnockoutJS如何为每个项目添加索引（或不同的增量编号）

Question

我对KnockoutJS有点陌生。我创建了一个自定义的Magento 2.3.4扩展程序，该扩展程序可以按预期工作。我有一个带有表的模板文件。它遍历一组数据并很好地打印出来。该表包含订单信息。这些列之一包含订单状态。我想给父元素一个特定的类，所以每个订单行都有不同的颜色。

这是我的模板文件：

<div class="admin__data-grid-wrap" data-role="grid-wrapper">
    <table class="data-grid" data-role="grid">
       <thead>
            <tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
        </thead>
        <tbody>
            <tr class="data-row" repeat="foreach: rows, item: '$row'" id="pl_salesordergrid_color">
                <td outerfasteach="data: getVisible(), as: '$col'"
                    css="$parent.getRowClass($col,$row(),$index);" click="getFieldHandler($row())" template="getBody()"/>
            </tr>
            <tr ifnot="hasData()" class="data-grid-tr-no-data">
                <td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>
            </tr>
        </tbody>
    </table>
</div>

我知道在KnockoutJS中，您可以使用$ index或$ index（）。我要完成的事情是将ID为pl_salesordergrid_color的元素设置为类似：pl_salesordergrid_color_1，但是$ index或$ index（）在foreach循环的第一行上不起作用。我在这里做错了什么？还是有其他方法可以完成？

很高兴有人知道答案。谢谢！在这里待了一整天，但我似乎无法让它工作lmao

Answer 1

我知道了。我刚刚做了一个新功能：

        getTrId: function (index) {

            return 'pl_salesordergrid_color_' + index;

        },

与此结合：

<div class="admin__data-grid-wrap" data-role="grid-wrapper">
    <table class="data-grid" data-role="grid">
       <thead>
            <tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
        </thead>
        <tbody>
            <tr class="data-row" repeat="foreach: rows, item: '$row'" data-bind="css: getTrId($index);">
                <td outerfasteach="data: getVisible(), as: '$col'"
                    css="$parent.getRowClass($col,$row(),$index);" click="getFieldHandler($row())" template="getBody()"/>
            </tr>
            <tr ifnot="hasData()" class="data-grid-tr-no-data">
                <td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>
            </tr>
        </tbody>
    </table>
</div>

这为TR提供了正确的类，这样我就知道我必须更改哪一个（添加CSS类，以便显示正确的颜色。）>