KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定


Posted in Javascript onOctober 10, 2016

if绑定目的

if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值,当非空字符串时则为真),if绑定的作用与visible绑定的作用类似。可控制DOM的显示与隐藏,不一样的地方是,if绑定是物理删除或添加DOM元素。

示例1

该例展示IF绑定的动态删除添加DOM:

Display message

UI源码:

<label><input type="checkbox" data-bind="checked: displayMessage" /> Display message</label>
<div data-bind="if: displayMessage">Here is a message. Astonishing.</div>

视图模型源码:

ko.applyBindings({
displayMessage: ko.observable(false)
});

示例2

该示例中,通过foreach绑定循环planets监控属性数组,其中name为Mercury的项目中capital为null,则循环中该项目只显示其name.

<ul data-bind="foreach: planets">
<li>
Planet: <b data-bind="text: name"> </b>
<div data-bind="if: capital">
Capital: <b data-bind="text: capital.cityName"> </b>
</div>
</li>
</ul>
<script>
ko.applyBindings({
planets: [
{ name: 'Mercury', capital: null }, 
{ name: 'Earth', capital: { cityName: 'Barnsley' } } 
]
});
</script>

备注:使用无容器的if绑定(if虚拟绑定)

像之前的虚拟绑定一样,同样使用<!-- ko -->和<!-- /ko -->进行。虚拟绑定适用于不改变UI元素的情况。

<ul>
<li>This item always appears</li>
<!-- ko if: someExpressionGoesHere -->
<li>I want to make this item present/absent dynamically</li>
<!-- /ko -->
</ul>

ifnot绑定

ifnot绑定是if绑定的逆向表达,格式与if绑定一样,只是判断结果与if整好相反。就像等于和不等于一样。例如:

<div data-bind="ifnot: someProperty">...</div>

其等效写法为:

<div data-bind="if: !someProperty()">...</div>

有人会说使用if绑定是足够了。为毛还要ifnot绑定。原因是有很多强迫症患者喜欢这种ifnot的绑定方式,看起来更易懂,代码更整洁。

以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 #Javascript
JS命令模式例子之菜单程序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 #Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 #Javascript
You might like
PHP实现网上点歌(二)
2006/10/09 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
分享Python文本生成二维码实例
2016/01/06 Python
用Python写冒泡排序代码
2016/04/12 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python实现的桶排序算法示例
2017/11/29 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
详解python配置虚拟环境
2019/04/08 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Django中的session用法详解
2020/03/09 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
实习单位推荐信范文
2013/11/27 职场文书
文案策划求职信
2014/04/14 职场文书
班级体育活动总结
2014/07/05 职场文书
行政管理专业求职信
2014/07/06 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
python某漫画app逆向
2021/03/31 Python
vue递归实现树形组件
2022/07/15 Vue.js