テーブル内でバインドする場合のノックアウトの使用

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戻るを通して取り込まれます。

Answer 1

ifバインディングを使用すると、列はDOMにまったく表示されません。また、

<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> 

iftr外に開き、内部の閉鎖された結合のためにあなたのcontainerless control flow syntaxを：あなたはidに基づいて異なる位置にそれらを表示しながら、すべての4列を表示したい場合は、それを変更する必要があります次の2つの列については逆も同様です。

ここにはfiddleがあります。

Answer 2

ノックアウトは、「コンテナレス制御フロー構文」が同様の要素として機能することを期待しています。要素の外側で開始し、要素の内側で終了することはできません。だからKnockoutの観点からは、<tr>の内部のコメントは単純に間違っていて無視されます。ノックアウトの場合のようになります。

<!-- 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 --> 

論理的には、配列内の2つの項目をすべてグループ化するとします。計算されたオブザーバブルを作成する必要があります。2つのアイテムをグループ化した新しい配列を返します。

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