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>

计算淘汰赛中的可见行数

1 个答案: