knockout.js - 如何在 Knockout 的 foreach 中添加分隔符

Question

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

this.Filter = ko.observableArray([{ "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>

但值显示为 abc

Answer 1

又快又脏

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

Answer 2

你可以这样做：

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

但最好计算将连接数组值：

self.Filter2 = ko.computed(function (){
    var result = "";
    ko.utils.arrayForEach(self.Filter(), function(item){
        if (!result){
            result = item.Value;
        }
        else{
            result = result + ', ' + item.Value;
        }
    });
    return result;
}); 

这是两种变体的小提琴：http: //jsfiddle.net/XrB7z/

Answer 3

现代 CSS 方式

相同的标记+类：

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

CSS：

.comma-separated {
  display: flex;
}

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

Answer 4

使用计算可能是最好的解决方案。

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

HTML：

<td data-bind="text: filterAsString"></td>