0

我正在尝试使用常见的淘汰赛模板。返回的数据将取决于在其中一个搜索过滤器中选择的内容。到目前为止，无论选择什么，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 文档中所示的无容器绑定

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