参考:
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会理解这个虚拟元素的语法并正确处理
分享到:
相关推荐
KnockoutJS-i18n 当前版本:0.2 依赖:KnockoutJS KnockoutJS-i18n 是一个简单的 KnockoutJS 模块,用于在您的 KO 网站中启用多语言。 KnockoutJS-i18n 使用 observable 或计算来创建和管理您的 Web 应用程序中的...
KnockOutJS示例 当用户在地图上选择标记时,用于添加,编辑和删除Google地图中的地点并显示instagram图片和yelp信息的应用程序。...cd KnockOutJS-GoogleMaps 安装凉亭依赖项 bower install 添加适用于ins
Knockoutjs-sparkline 全能 jQuery Sparkline 的 KnockoutJS 自定义绑定 依赖 没有凉亭。 项目与 Bower 重生。 扩展选项 TODO:这些可以通过将对象传递给绑定器而不是使用单独的绑定来以更友好的 KnockoutJS ...
KnockoutJS-Express-ES6 该示例演示了如何使用KnockoutJS,Express.js和ECMAScript 6以MVVM模式实现单页应用程序(SPA)。 主要特点 单页应用程序(SPA) ECMAScript 6(ES6)(带有BabelJS) 适用于MVVM的...
KOReact器一个KnockoutJS插件,可让您无缝定位视图模型中的所有更改,并能够即时定位和处理它们。 它不需要对标记或视图模型本身进行任何修改,因此非常适合测试和快速制作原型。 用法: ko.watch...
使用 KnockoutJS 的地址簿 这是学习knockoutJS的分步教程。 为什么 要成为一名出色的 Web 开发人员,您必须能够使用最新的技术和框架。 KnockoutJS 是新一代框架的一部分,它使前端开发变得更加容易,就像一样。 ...
knockoutjs-form
Knockoutjs-示例 该项目基于Udacity为前端NanoDegree课程提供的项目。 该项目已修改为使用基因敲除框架。
Knockoutjs-教程 Python网络服务器 python -m SimpleHTTPServer
淘汰赛-doc-ja KnockoutJS 的非官方日语文档。 添加了对 Markdown 的支持。 文章文件为 docs/articles/*.md。 PULL REQ 如果你发送它,它会被反映!格式暂时以下的风格和原家是一致的,但是如果你写的不放心,我们会...
淘汰赛-慢跑 KnockoutJS 的每日提交
#KnockoutJS 教程示例我尝试了教程代码。我用 Bootstrap SF1 调整了设计部分。 ### 01 你好世界 ### 02 简介 ... ### 05 创建自定义绑定 ### 06 加载和保存数据 ### 参考 LINK Bootstrap SF1 KnockoutJS
Knockout-jsonSchema kickout-jsonSchema是一个插件,旨在根据规范生成JSON模式。 生成的JSON模式描述了给定的剔除视图模型的有效JSON数据,包括使用库定义的数据限制。 这使您可以轻松生成一个架构,该架构可用于在...
可以在Brackets-preference文件中分别禁用所有功能: " ericsmekens.knockoutjs.show_icon " : true ," ericsmekens.knockoutjs.code_hint " : true ," ericsmekens.knockoutjs.quick_edit " : true发行说明0.1.0 ...
#KnockoutJS Starter# ###来自我的 KnockoutJS Starter Book 的片段和示例### 许可证: 依赖:jQuery & Knockout
KnockoutJS-App KnockoutJS-的应用使用基本功能的CRUD(创建,读取,更新和删除)应用 。 该应用程序演示了如何使用AJAX加载,渲染和保存嵌套的JSON数据。 该应用程序使用: 以创建封装HTML组件或小部件, 使复杂...
警告如果您无话可说,那么impress.js可能对您没有帮助;)关于名字impress.js的名称。 Open / LibreOffice演示工具称为Impress是一个(不幸的)巧合;)版本历史0.5.3(, , )错误修复0.5版引入了包括impress:...
KnockoutJS 嵌套数据表 KnockoutJS Nested DataTable是一个 KnockoutJS 自定义组件,易于使用、自定义元素、嵌套表和可扩展。 所有默认的 dataTable 功能,如排序、分页、搜索等,也适用于该组件。 当前版本 0.1.0 ...
敲除JS组件使用基因剔除创建的自定义组件
淘汰赛计时器一个用 KnockoutJS 构建的简单计时器,带有可以启动、停止和重置计时器的按钮。