如何在Knockoutjs中合并内容相同的表单元格？

Question

我正在尝试用Knockoutjs创建表格。如果某些单元格的属性值相同，我想合并表格单元格。我想不出该怎么做。

我有以下代码

<table id="EventTracker"> <tbody data-bind="template: { name: 'person-template', foreach: Person}"></tbody></table>
<script type="text/html" id="person-template">
    <tr><td data-bind="text: Name"></td><!-- ko template: { name: 'event-template', foreach: event }--> <!-- /ko --> </tr> 
</script>

<script type="text/html" id="event-template">
    <td data-bind="text: Label"></td>
</script>

表创建得很好。但是，如果每个单元格中的内容相同，我不希望显示单个单元格。如果用于创建td的事件与前一个事件相同，我希望将单元格的列跨度增加1。实际上，不是创建单个单元格，而是合并它们。例如，如果我有3个具有相同文本的单元格，它们应该合并并创建一个colspan为3的td。我不知道如何在Knockoutjs中编码。

有什么想法吗？

Answer 1

与其使模板复杂化，不如在视图模型中构建事件数据的映射版本，这将使绑定变得更容易。

person对象上的计算可观察对象可能如下所示：

this.eventCells = ko.computed(function() {
    var current,
        result = [];

    ko.utils.arrayForEach(this.events(), function(event) {
        if (current && current.label() !== event.label()) {
            current = null;
        } 

        if (!current) {
            current = { label: event.label, count: 0 };   
            result.push(current);
        }

        current.count++;      
    });

    return result;   
}, this);

现在，您可以通过eventCells访问，然后像这样绑定：

data-bind="text: label, attr: { colspan: count }"

下面是一个示例：http://jsfiddle.net/rniemeyer/3g8jw/