Knockout.js 如何在敲除的foreach中添加分隔符

我需要为下面的可观察数组添加逗号分隔符

this.Filter=ko.observearray（[{“Key”：“1”，“Value”：“a”}，{“Key”：“2”，“Value”：“b”}，{“Key”：“3”，“Value”：“c”}]）

我需要显示上面的数组，比如a，b，c

<td data-bind="foreach: Filter">
   <span data-bind="text: value"></span>
</td>



但是这个值显示得像一个b c
快速而肮脏

<td data-bind="foreach: Filter">
   <!-- ko if: $index() > 0 -->,<!-- /ko -->
   <span data-bind="text: value"></span>
</td>


,
您可以执行以下操作：

<td data-bind="foreach: Filter">
    <!--ko if: $index() != 0-->,<!--/ko-->
   <span data-bind="text: Value"></span>
</td>

这两种变体都可以处理：
使用计算机可能是最好的解决方案

this.filterAsString = ko.computed(function () {
    return ko.utils.arrayForEach(this.Filter(), function(item) {
        return item.Value;
    }).join(', ');
}, this);

HTML:

现代CSS方式

相同的标记+类：

<td data-bind="foreach: Filter" class="comma-separated">
   <span data-bind="text: value"></span>
</td>

这取决于你想成为多纯粹的MVVM。一些DEV认为逗号是布局（视图）的一部分，而不是行为（View Mead）。但我并不是说它错了：p只有在显示文本时，计算机才有用。。。。如果您需要对项目进行进一步的KO处理，那么这将不起作用。这会不会在最后一个条目后添加一个
，
？i、 e.
a，b，c，
？不，如果索引>0，它会将，放在值之前
<td data-bind="text: filterAsString"></td>

<td data-bind="foreach: Filter" class="comma-separated">
   <span data-bind="text: value"></span>
</td>

.comma-separated {
  display: flex;
}

.comma-separated > span + span:before {
  content: ", ";
}