javascript - 如果在表内绑定(bind)，则使用 knockout

Question

我试图在表格内使用 if 绑定(bind)，但第三列根本不显示文本，而第一列中的条目正在显示。

<table id="searchPanelForm" cellspacing="0" cellpadding="0" align="center" class="conttable" width="100%" border="0" data-bind="">
    <tbody>
        <!-- ko foreach: searchPanelArray -->
            <!-- ko if: $parent.isSearchEven($data.id) -->
                <tr>
                    <td class="col2" data-bind="text: $data.label"></td>
                    <td class="col3"><input type="text"></td>
            <!-- /ko -->
            <!-- ko if: !$parent.isSearchEven($data.id) -->
                    <td class="col2" data-bind="text: $data.label"></td>
                    <td class="col3"><input type="text"></td>
                </tr>
            <!-- /ko -->
        <!-- /ko -->
    </tbody>
</table>

searchPanelArray 通过 ajax 调用填充，当索引为偶数或奇数时，isSearchEven 分别返回 true 或 false。

Answer 1

Knockout 期望“无容器控制流语法”像元素一样起作用。它们不能从元素外部开始并在元素内部结束。所以从Knockout的 Angular 来看，<tr>内部的评论只是格式错误并被忽略。这就是 knockout 的样子:

<!-- ko foreach: searchPanelArray -->
    <!-- ko if: $parent.isSearchEven($data.id) -->
        <tr>
            <td class="col2" data-bind="text: $data.label"></td>
            <td class="col3"><input type="text"></td>
            <td class="col2" data-bind="text: $data.label"></td>
            <td class="col3"><input type="text"></td>
        </tr>
    <!-- /ko -->
<!-- /ko -->

从逻辑上讲，您希望将数组中的每两个项目分组。您应该创建一个计算的可观察量，它返回一个新数组，其中两个项目组合在一起。

this.searchPanelArrayGrouped = ko.pureComputed(function() {
    var result = [], source = this.searchPanelArray();
    for (var i = 0; i < source.length; i += 2) {
        if (i + 1 >= source.length) {
            result.push({left: source[i], right: {}});
        } else {
            result.push({left: source[i], right: source[i+1]});
        }
    }
    return result;
}, this);

HTML:

<!-- ko foreach: searchPanelArrayGrouped -->
    <tr>
        <td class="col2" data-bind="text: $data.left.label"></td>
        <td class="col3"><input type="text"></td>
        <td class="col2" data-bind="text: $data.right.label"></td>
        <td class="col3"><input type="text"></td>
    </tr>
<!-- /ko -->

https://jsfiddle.net/bg75xvxc/

以下是相关答案:https://stackoverflow.com/a/10577599/1287183