计算敲除 foreach 中的可见行

Question

我想在我显示的每一行上显示一个计数。这些行来自一个可观察的数组，其中只会显示某些元素。这取消了为此使用 $index 的通常解决方案。

标记：

<!-- ko foreach: { data: enterprise().Sessions, as: 'Session' } -->
<div data-bind="if: $root.isSessionVisible(Session)">

<b>
    <span data-bind="text: $index() + 1"></span>
</b>

我应该用什么代替“$index() + 1”来显示实际显示行数？

谢谢！

Answer 1

这可以使用 knockoutjs 方法来完成，但我认为如果使用 pure css counters

会更快且更易于维护

示例（仅显示html+css）：

css

body {
  counter-reset: session-active 1;
}
span.session.active::before {
  display: inline-block;  
  counter-increment: session-active; /* Increment the session counter*/
  content: "Session" counter(session-active) ": "; /* Display the counter */
}

html（每个会话项目）

<b><span class="section active"></span></b>

计算敲除 foreach 中的可见行

Counting visible rows within knockout foreach

knockout.js