knockoutjs 将当前行元素与前一个行元素进行比较答案

【问题标题】：knockoutjs comparing current row element with previous row elementknockoutjs 将当前行元素与前一个行元素进行比较
【发布时间】：2014-04-22 10:54:55
【问题描述】：

我有一个绑定到模板的淘汰视图模型，如下所示，它正确显示了所有内容。但我喜欢做的是，如果当前行文件夹与前一行的文件夹相同，那么我想留空而不是重复相同的文件夹。我在数据绑定中尝试过这样的：“text: ($index() > 0 ? ($data[$index() - 1].Folder == $data.Folder ? '': $data.Folder ) : '') 但它不起作用。任何帮助将不胜感激。谢谢。

<table border="1">    
    <script type="text/html" id="content-template">  

        <tr data-bind="css: { 'firstRow': $index() % 2 }">
            <td><span data-bind="text: $index() + 1"></span></td>
            <td><span data-bind="text: Folder"></span></td>
            <td><span data-bind="text: Location"></span></td>                    
        </tr>
    </script>
</table>
<div data-bind="visible: loaded()">        
    <div id="data" data-bind="template: { name: 'content-template', foreach: contents }"></div> 
</div>

【问题讨论】：

是的，内容被声明为 obserableArray。

标签： knockout.js

【解决方案1】：

在视图模型上创建一个函数来确定可见与否——它使测试更容易，data-bind 属性更简单：

showItem: function(index) {
    if( index == 0 )
        return true;

    return this.contents[index - 1].Folder != this.contents[index].Folder;
}

现在将visible 属性绑定到这个函数：

visible: $parent.showItem($index())

这是jsFiddle showing a working example。

【讨论】：

假设 contents 是一个可观察的数组，上面的代码应该有 () 附加到每个出现的内容。例如。 "返回 this.contents()[index - 1].Folder != this.contents()[index].Folder;"
@ChuckSchneider，正确，if 'contents' 是一个可观察的数组。在我的示例中，为了简单起见，我只是使用了一个常规数组（并且原始问题并未说明是否使用了可观察数组）。

【解决方案2】：

您在 foreach 块中访问内容数组的语法不正确：

"text: ($index() > 0 ? ($data[$index() - 1].Folder == $data.Folder ? '': $data.Folder) : '')。

$data 是当前 contents() 可观察数组 element，而不是 contents 数组本身。要访问内容数组，您可以使用：

$parent.contents()[$index()]

如果 $index() > 0 则获取前一个元素

$parent.contents()[$index()-1]

【讨论】：