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片段
View: <label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label> <div data-bind="if: displayMessage">Here is a message. Astonishing.</div> <script> // View model: ko.applyBindings({ displayMessage: ko.observable(false) }); </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不允许这么做。
<ul> <li>This item always appears</li> <li>I want to make this item present/absent dynamically</li> </ul>
这种情况下,可以使用基于html注释标签的无容器控制流语法:如下
<ul> <li>This item always appears</li> <!-- ko if: someExpressionGoesHere --> <li>I want to make this item present/absent dynamically</li> <!-- /ko --> </ul>
用<!--ko-->和<!--/ko-->注释这样的一对html标签,来定义一个“虚拟的元素”来包含html内容。Knockout会理解这个虚拟元素的语法并正确处理
相关推荐
85931734 2019-11-25
88901533 2014-11-06
89570797 2015-03-11
85580894 2014-04-02
89570797 2016-05-31
80961131 2015-03-11
87941631 2015-02-10
89233916 2015-01-14
89233916 2015-01-07
89570797 2014-12-31
87941631 2014-11-06
89233916 2014-11-04
80961131 2014-11-03
89433869 2014-09-11
89570797 2013-08-24
88901533 2012-08-24
89901038 2017-12-18
89901038 2017-07-31
85971631 2019-05-08