Question

我正在尝试使用knockout虚拟元素每两个记录创建一个新行。我的问题是奇数记录不会在两个偶数索引之间生成。

这是我的源HTML

   <!--ko foreach:UDGroupboxes-->
    <!--ko if:$index()%2==0 || $index()==0-->
    <div class="row-fluid">
    <!--/ko-->
        <div class="panel form-horizontal span6">
            <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div>
        </div>
     <!--ko if:$index%2()!=0 && $index()!=0-->
    </div>
    <!--/ko-->
    <!--/ko-->

输出HTML

<div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1">
    <!--ko foreach:UDGroupboxes-->
    <!--ko if:$index()%2==0 || $index()==0-->
    <div class="row-fluid">
    <!--/ko-->
        <div class="panel form-horizontal span6">
            <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div>
        </div>
     <!--ko if:$index%2()!=0&&$index()!=0-->
    </div>
    <!--/ko-->

    <!--ko if:$index()%2==0 || $index()==0--><!--/ko-->

    <!--ko if:$index()%2==0 || $index()==0-->
    <div class="row-fluid">
    <!--/ko-->
        <div class="panel form-horizontal span6">
            <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div>
        </div>
     <!--ko if:$index()%2!=0&&$index()!=0-->
    </div>
    <!--/ko-->
    <!--/ko-->
</div>

无论条件如何，都应该生成面板。条件仅确定在偶数上打开一个新行并在赔率上关闭该行。

Answer 1

Knockout绑定仅发生在元素上，虚拟元素也必须遵循元素层次结构。如果我们采用您的示例并使用缩进来显示元素关系，它看起来像这样：

<!--ko foreach:UDGroupboxes-->
    <!--ko if:$index()%2==0-->
        <div class="row-fluid">
            <!--/ko-->
            <div class="panel form-horizontal span6">
                <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div>
            </div>
            <!--ko if:$index()%2!=0-->
        </div>
    <!--/ko-->
<!--/ko-->

Knockout会忽略div内的关闭和打开虚拟标记。所以上面只是输出其他所有项目的效果。

这是在Knockout中对数组项进行分组的一个很好的答案：https://stackoverflow.com/a/10577599/1287183

Answer 2

你最好用多维阵列提供淘汰赛。这是一个更清洁的解决方案，并且对于古怪结果的可能性较小。

请看示例2：注3：在文档中：http://knockoutjs.com/documentation/foreach-binding.html

#include<stdio.h>
#include<string.h>
#include<stdlib.h>
#include<malloc.h>

char* strcpy2 (char* str1, char* str2)
{
    char nstr[20];
    int i,j;
    for (i = 0; str1[i] != '\0'; i++)
    {
        nstr[i] = str1[i];
    }
    for (j = i, i = 0; str2[i]!='\0'; i++, j++)
    {
        nstr[j] = str2[i];
    }
    nstr[j] = '\0';
    return nstr;
}

void main()
{
    char str1[10] = "Hello";
    char str2[10] = ",friends";
    puts(strcpy2(str1, str2));
}

使用knockout foreach每2条记录创建一个新行

这是我的源HTML

输出HTML

2 个答案: