参考: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片段

  1. View:
  2. <label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>
  3. <div data-bind="if: displayMessage">Here is a message. Astonishing.</div>
  4. <script>
  5. // View model:
  6. ko.applyBindings({
  7. displayMessage: ko.observable(false)
  8. });
  9. </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不允许这么做。

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

这种情况下,可以使用基于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会理解这个虚拟元素的语法并正确处理

knockoutjs -- if 绑定的更多相关文章

  1. knockoutjs with绑定导致unobtrusive validation失效的问题

    如果最初的时候with绑定的对象是空的,那么with绑定内部的unobtrusive validation规则在提交的时候无法生效,无法进行验证. 解决办法: 在提交的时候(或者with绑定的对象非空 ...

  2. KnockoutJS(3)-绑定语法

    绑定语法大致分为2种: 1. 数据绑定(data-bind syntax) 2. 绑定上下文(Binding Context) 下面针对这2中绑定语法分别介绍一下 1. 绑定上下文(Binding C ...

  3. KnockoutJS学习笔记10:KonckoutJS foreach绑定

      KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <tabl ...

  4. [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

  5. KnockoutJS-模板绑定

    对于knockoutJS来讲,模板绑定和Mapping插件绑定是十分重要的功能,虽然模板绑定在我工作中用的及其少,但模板绑定的重要性不可忽视,在其他前端框架中,如Angular.Vue等等,模板存在的 ...

  6. KnockJs 绑定语法

    按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法. 相关的教程大家可以去看 汤姆大叔的博客. 练习代码下载 由于没有环境,代码直接用记事本写的,可能比较乱,仅作 ...

  7. Knockout.js之初印象

    最近在学Knockout.js,想要把看到的东西用blog记录下来. Knockout.js是一个MVVM的框架,突然想起之前有人问我哪些是MVVM框架?我回答了angular.js和bootstra ...

  8. KnockoutJS中父元素有click绑定引起checked绑定时失效

    KnockoutJS中的checked绑定如果父元素有click绑定,会出现状态点击没反应,实际KO的值已经变化的情况. 这种情况下应该在checked绑定的元素上除了阻止事件冒泡,另外还需要额外加上 ...

  9. Knockoutjs 实践入门 (1) 属性绑定

    1  是什么? 使用MVVM模式的简单,动态的Javascript UI.           2   优点  声明式绑定  UI 自动更新 依赖追踪  模板化          3 如何使用   & ...

随机推荐

  1. JDK源码(1.7) -- java.util.Map<K,V>

     java.util.Map<K,V> 源码分析 --------------------------------------------------------------------- ...

  2. python开发_pickle

    pickle模块使用的数据格式是python专用的,并且不同版本不向后兼容,同时也不能被其他语言说识别.要和其他语言交互,可以使用内置的json包使用pickle模块你可以把Python对象直接保存到 ...

  3. acdream 1725 哗啦啦的小彭玉染色问题 离散化并查集

    哗啦啦的小彭玉染色问题 Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acdream.info/problem?pid=1725 Descri ...

  4. mp4网页播放代码,有声音无图像的解决办法~

    mp4网页播放代码,有声音无图像的解决办法~     关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github ...

  5. 在雇员表中查找第二高的工资SQL语句助记

            "在雇员表中查找第二高的工资的员工记录"SQL语句怎么写         这个查询首先查找最高工资,然后将它从列表中排除.再查找最高工资. 非常明显,第二次返回的是 ...

  6. LWIP轻量级TCPIP协议栈的移植

    http://blog.csdn.net/ygrx/article/details/8020516 好久没有做过技术工作了,前几天因为一些需要,要在ST的OS20平台上进行了LWIP的移植,有一些心得 ...

  7. Digital Adjustment of DC-DC Converter Output Voltage 电阻选择

  8. 以前写SpringMVC的时候,如果需要访问一个页面,必须要写Controller类,然后再写一个方法跳转到页面,感觉好麻烦,其实重写WebMvcConfigurerAdapter中的addViewControllers方法即可达到效果了

    以前写SpringMVC的时候,如果需要访问一个页面,必须要写Controller类,然后再写一个方法跳转到页面,感觉好麻烦,其实重写WebMvcConfigurerAdapter中的addViewC ...

  9. 4)linux程序设计入门--时间概念

    )程序设计入门--时间概念 前言:Linux下的时间概念 这一章我们学习Linux的时间表示和计算函数 时间的表示 时间的测量 计时器的使用 .时间表示 在程序当中,我们经常要输出系统当前的时间,比如 ...

  10. Liunx下文件权限详解

    刚接触Linux时对Linux下的文件权限的概念一直很模糊,观念还一直停留在windows下,所以有很多操作一直提示权限不够.为了弄懂文件权限问题我查找了很多资料整理如下,我把这些学习笔记贴出来和大家 ...