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 相关文章推荐
javascript通过class来获取元素实现代码
Feb 20 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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判断变量是否为0的方法
2014/02/08 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
小小聊天室Python代码实现
2016/08/17 Python
浅谈django中的认证与登录
2016/10/31 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
python使用requests.session模拟登录
2019/08/09 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
django和vue实现数据交互的方法
2019/08/21 Python
python实现代码审查自动回复消息
2021/02/01 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
工作说明书范文
2014/05/07 职场文书
校园环保标语
2014/06/13 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
朋友聚会开场白
2015/06/01 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
基于angular实现树形二级表格
2021/10/16 Javascript
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python