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>

但价值显示为b c

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>

如何在Knockout的foreach中添加Delimiter

4 个答案: