0

一般的なノックアウト テンプレートを使用しようとしています。返されるデータは、検索フィルターの 1 つで何が選択されたかによって異なります。現在、選択されているものは何でも、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>
4

1 に答える 1

1

標準の JavaScript バージョンではなく、ハンドラーをバインディングする場合はノックアウトを使用する必要があります -

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

また、示されているように、 self を使用する必要はありません。現在のコンテキストで何かを参照すること。また、 if binding doc に示されているように、コンテナのないバインディングをチェックアウトすることもできます

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>
于 2013-10-06T14:37:51.737 に答える