Question

我试图在表格中使用if绑定，而第3列根本不显示第1列中的条目显示的文本。

<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期待＆＃34;无容器控制流语法＆＃34;像元素一样行事。它们不能从元素的外部开始并在元素内部结束。因此，从Knockout的观点来看，<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 -->

逻辑上，您希望对数组中的每两项进行分组。您应该创建一个计算的observable，返回一个新数组，其中两个项目组合在一起。

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

Answer 2

如果使用el = driver.find_element_by_xpath('//div[@class="clr"]/span/br')绑定，则根本不会在DOM上呈现列。如果要显示所有4列，同时根据userObjectId在不同位置显示它们，则应将其更改为：

if

另外，id绑定的 containerless control flow syntax 在<table id="searchPanelForm" cellspacing="0" cellpadding="0" align="center" class="conttable" width="100%" border="0"> <tbody>  <tr> <td class="col1" data-bind="text: $parent.isSearchEven($data.id) ? $data.label : ''"></td> <td class="col2"> <input type="text"> </td> <td class="col3" data-bind="text: !$parent.isSearchEven($data.id) ? $data.label : ''"></td> <td class="col4"> <input type="text"> </td> </tr>  </tbody> </table>之外打开，在内部关闭，反之亦然，接下来的两列。

这是fiddle。

如果在表内绑定则使用knockout

2 个答案: