knockout.js - Knockout の foreach 内に Delimiter を追加する方法

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>