Как добавить разделитель внутри foreach нокаута

мне нужно добавить разделитель запятой для ниже наблюдаемого массива

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

9
knockout.js

4 ответов

и

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

вы можете сделать это:

<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/

13

современный путь 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: ", ";
}
3

использование вычисляемого, вероятно, является лучшим решением.

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>
0