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

如果是绑定处理程序，则需要使用knockouts，而不是标准的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>

基于收到的数据显示/隐藏的敲除模板

1 个答案: