knockout.js - 在 foreach knockout 绑定(bind)中使用上一个项目

Question

我有以下问题:我有一个可观察的数组(从服务器填充)，如下所示:

this.elems = ko.observableArray([
    {n: 1, t : 'hello'},
    {n: 1, t : 'why'},
    {n: 1, t : 'are'},
    {n: 2, t : 'some'},
    {n: 2, t : 'ducks'},
    {n: 3, t : 'here'},
    {n: 8, t : '?'}
]);

我想通过以下方式展示它:

      1
Hello
why
are
      2
some
ducks
      3
here
      8
?

如您所见，仅当前一个数字与当前数字不同时，才会显示该数字。
使用 foreach 将非常简单绑定(bind)(这是我的 jsFiddle )。

<div data-bind="foreach: elems">
    <div class="t1">
        <span data-bind="text: n" class="c1"></span>
        <span data-bind="text: t" class="c2"></span>
    </div>
</div>

只有当我能够访问前一个元素时。
我知道我可以修改我的 observalbe 数组并实现我想要的，但是有没有办法在不改变它的情况下做到这一点？

Answer 1

您可以访问 $index 和 $parent 值。试试这个:

<div data-bind="foreach: elems">
    <div class="t1">
        <!-- ko if: $index() === 0 || $parent.elems()[$index() - 1].n !== n -->
        <span data-bind="text: n" class="c1"></span>
        <!-- /ko -->
        <span data-bind="text: t" class="c2"></span>
    </div>
</div>

另一种使用可见绑定(bind)的替代方法:

<div data-bind="foreach: elems">
    <div class="t1">
        <span data-bind="text: n, visible: $index() === 0 || $parent.elems()[$index() - 1].n !== n" class="c1"></span>
        <span data-bind="text: t" class="c2"></span>
    </div>
</div>