淘汰賽模板顯示/隱藏基於收到的數據

Question

我想使用一個常見的淘汰賽模板。返回的數據將取決於在其中一個搜索過濾器中選擇的內容。截至目前，無論選擇什麼，DOB TD都會與其他TD一起顯示。我想根據選擇顯示/隱藏TD。我該怎麼做呢？觀測量

self.SearchByVal = ko.observable(""); // Holds the value of the filter selected 
self.SearchByVal(document.getElementById("<%=ddlSearchBy.ClientID%>").value); // Hold the selected value. 

的

部分所選擇的值可以是DOB，JoinDate，RetirementDate。

的HTML

<table width="100%" id="tblSearchResults" data-bind="visible: SearchResults().length>0"> 
    <thead > 
     <tr > 
      <th align="left">Employee Name</th> 
      <th>Gender</th> 
      <th align="left" data-bind="text:SearchByVal"></th> 
     </tr> 
     <tr style="border-bottom: 1px solid #CCC;"> 
     <th colspan="3"></th> 
     </tr> 
    </thead> 
    <tbody id="EmployeeDetails" data-bind="template: { name:'TmplSearchResults', foreach: SearchResults }"> 
           </tbody> 

    </table> 

模板

<script type="text/html" id="TmplSearchResults"> 
<tr style="border-bottom: 1px solid #CCC;" > 
     <td valign="middle" data-bind="text: name"></td> 
     <td valign="middle" align="center" data-bind="text: gender"></td> 
     if (self.SearchByVal() == "DOB") { //<-- I tired this but shows in all cases 
       <td valign="middle" data-bind="text: dob"></td> 
     } 
     if (self.SearchByVal() == "JoinDate") { //<-- This also shows when DOB is selected 
       <td valign="middle" data-bind="text: JoinDate"></td> 
     } 
    </tr> 
</script> 

Answer 1

您需要使用擊倒如果綁定處理程序，而不是標準的JavaScript版本 -

<div data-bind="if: SearchByVal() === 'DOB'"> 
    //content 
</div> 

也爲SH擁有你不需要使用自我。引用當前上下文中的任何內容。您可能還需要檢查出無容器綁定作爲如果綁定文檔顯示

http://knockoutjs.com/documentation/if-binding.html

無容器結合的例子 -

<script type="text/html" id="TmplSearchResults"> 
<tr style="border-bottom: 1px solid #CCC;" > 
     <td valign="middle" data-bind="text: name"></td> 
     <td valign="middle" align="center" data-bind="text: gender"></td> 
     <!--ko if: (SearchByVal() == "DOB") --> 
       <td valign="middle" data-bind="text: dob"></td> 
     <!-- /ko --> 
     <!--ko if: (SearchByVal() == "JoinDate") --> 
       <td valign="middle" data-bind="text: JoinDate"></td> 
     <!-- /ko --> 
    </tr> 
</script>