knockout ififnot

此例根据checkbox是否勾选来控制是否显示下面的一个div

首先引入需要的knockout-3.1.0.js 文件

<head><script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>//这是一个多选框，默认是fasle没选中，true为选中<lable><input type="checkbox" data-bind="checked:displayMessage">Message</lable>//如果displayMessage是true就显示此div的值<div data-bind="if:displayMessage">is a Message</div> </body>
<script type="ext/javascript">//applyBindings是激活koko.applyBindings([displayMessage:ko.observable(false) //双向绑定，当checked中的值变化时它也会试试变化])
</script>

效果

口 Message
is a Message
如果选中多选框，通过双向绑定就会将displayMessage的值变为true就会显示div中的内容

我们也可以使用if来判断某个袁术是否为null,如果为null则不会显示

<body><ul data-bind="foreach:data"><li>name:<b data-bind="text:name"></b>//进行判断，如果为null就不显示内容<div data-bind="if:code">  //code.child变成子节点，也可以不写，不写是平级code:<b data-bind="text:code.child"></a></div></li></ul>
</body>
<script type="ext/javascript">var viewModel={data:[{name:"name01",code:null},{name:"name02",code:"mychen"}]
}
</script>

结果

name01
name02mychen          text:code.child加了这个变成name02的子节点

ifnot就是相当于!非反着来

<head><script type="text/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>//这是一个多选框，默认是fasle没选中，true为选中<lable><input type="checkbox" data-bind="checked:displayMessage">Message</lable>//如果displayMessage是false就显示此div的值 ifnot:!displayMessage 是true就显示此div<div data-bind="ifnot:displayMessage()">is a Message</div> </body>
<script type="ext/javascript">//applyBindings是激活koko.applyBindings([displayMessage:ko.observable(false) //双向绑定，当checked中的值变化时它也会试试变化])
</script>

knockout ififnot相关推荐

knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
Knockout应用开发指南第六章：加载或保存JSON数据
原文:Knockout应用开发指南第六章:加载或保存JSON数据加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...
knockout之自定义绑定
Creating custom bindings You're not limited to using the built-in bindings like click, value, and so ...
Knockout应用开发指南第八章：简单应用举例（1）
Knockout应用开发指南第八章:简单应用举例(1) 原文:Knockout应用开发指南第八章:简单应用举例(1) 本章展示的4个例子主要是利用了Knockout的基本语法特性,让大家感受到使用 ...
Knockout学习之前言
Knockout官网 Knockout第三方表单验证插件转载于:https://www.cnblogs.com/TiestoRay/p/4123782.html
JQuery Ajax 与 Knockout.js的结合
项目中遇到太多JQuery Ajax 与 Knockout.js的结合来处理数据的情况,今天将这部分内容梳理一下.一来弄清楚二者结合处理数据的流程,二来是感觉二者结合在一起用的时候有点将二者搞混了,弄 ...
Knockout 监控数组对象属性
代码: function Product(ProductID,ProductName,ProductNum,Result,Price) {this.ProductID = ko.observable( ...
Knockout.js 学习（六）-- 监控属性数组 applyBinding Observables
如果你想发现并响应一个对象的改变,就应该用监控属性(observables).如果你想发现并响应一个集合的变化,就该用监控属性数组(observableArray).监控属性数组在显示或编辑多个值 ...
MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...

knockout ififnot

knockout ififnot相关推荐

最新文章

热门文章