knockoutjs -- if 绑定

参考：http://knockoutjs.com/documentation/if-binding.html 

If 绑定用来控制一部分html标签是否生成在DOM树中（html标签有data-bind属性）。只有if的条件表达式等于true（或者是类似true的值，如非null的对象，非空字符串），那么对应的html才会被输出，否则不会被输出到客户端。 

If绑定和visible绑定类似，不同之处在于：对于visible绑定，包含的html标签内容一直会存在在DOM树中，它只是用css来控制这些元素时候显示。而对于if绑定，它是物理的往DOM树中增加或者移除那部分html标签。 

例子：用if绑定来根据checkbox的值动态增加或者移除html片段 

Html代码  

1. View：  
2. <label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>  
3.    
4. <div data-bind="if: displayMessage">Here is a message. Astonishing.</div>  
5.   
6. <script>  
7. // View model：  
8. ko.applyBindings({  
9.     displayMessage: ko.observable(false)  
10. });  
11. </script>  

if 绑定参数： 

• 用来计算的表达式。如果表达式的值为true（或者类似true的值），那么包含的html内容就会被输出到DOM树中，包含html内容中的任何data-bind属性都会被应用。如果表达式的值为false，那么包含的html内容就会被从DOM树中移除，同时包含的任何data-bind属性也不会被应用。
• 表达式包含观察者变量。如果表达式包含任何一个观察者变量，那么在变量值发生变化时，表达式都会被重新计算。对应的html内容就会根据计算的结果动态地加到DOM树中，或者从DOM树中移除。当增加部分的html内容中包含data-bind属性，那么这些绑定都会被启用

没有容器元素下使用if绑定： 
有时候，可能需要再没有任何外部容器元素的情况下，使用if绑定来控制html片段的增加或者移除。譬如如下例子，想要动态控制ul下第二个li。如果把if放到ul里面，那么第一个li也会被影响到；同时也不能用任何元素来包住li，因为html不允许这么做。 

Html代码  

1. <ul>  
2.     <li>This item always appears</li>  
3.     <li>I want to make this item present/absent dynamically</li>  
4. </ul>  

这种情况下，可以使用基于html注释标签的无容器控制流语法：如下 

Html代码  

1. <ul>  
2.     <li>This item always appears</li>  
3.     <!-- ko if: someExpressionGoesHere -->  
4.         <li>I want to make this item present/absent dynamically</li>  
5.     <!-- /ko -->  
6. </ul>  

用<!-- ko --> 和 <!-- /ko --> 注释这样的一对html标签，来定义一个“虚拟的元素”来包含html内容。Knockout会理解这个虚拟元素的语法并正确处理 

转载于:https://www.cnblogs.com/amylis_chen/p/6208661.html