使用敲除如果在表内绑定

问题描述：

我试图在表内使用if绑定，并且第三列根本不显示第一列中的条目正在显示的文本。使用敲除如果在表内绑定

<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返回真或假，当指数分别是偶数还是奇数填充。

答

如果使用if绑定，则根本不在DOM上呈现列。如果你想同时在基于该id不同的位置显示它们来显示所有4列，你应该将其更改为：

<table id="searchPanelForm" cellspacing="0" cellpadding="0" align="center" 
    class="conttable" width="100%" border="0"> 
    <tbody> 
    <!-- ko foreach: searchPanelArray --> 
    <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> 
    <!-- /ko --> 
    </tbody> 
</table>

此外，您containerless control flow syntax为if结合是打开tr外部和内部封闭反之亦然2列。

这是fiddle。

我每一行中希望四列。即使数组的索引应该在第一列中作为第三列中的奇数索引。这就是为什么我使用'tr'就在[ko' –

@ManiSankar像[this]（https://jsfiddle.net/adigas/aw0sokL7/1/）？ – adiga

像https://jsfiddle.net/bsudte2n/，但第三列应该有标签1和标签3，它没有得到显示。 –

答

Knockout期望“无容器控制流语法”充当元素。它们不能从元素的外部开始，并在元素内部结束。所以从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://*.com/a/10577599/1287183

使用敲除如果在表内绑定

相关推荐