knockoutjs中的visible绑定

﹏ヽ暗。殇╰゛Y 2022-07-03 18:55 174阅读 0赞

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan]

visible就是用来控制是否显示的，当值为true的时候则显示，为false的时候隐藏，knockoutjs有双向绑定的机制，假设现在有一个场景，从后台查出数据，数据格式为一个list，查出数据后需要绑定到前台页面上，这时候需要去判断查回的list是否是存在的，也就是有数据的，不是null也不是count为0，如果数据是存在的，那么则显示一个内容，如果不存在，则隐藏该内容。

1.visible绑定基本结构：

2.简单的visible绑定：

3.visible根据list内容进行显示：

<html>
    	<head>
    		<title>根据list的count进行visible绑定</title>
    		<script type="text/javascript" src="knockout-3.4.1.js"></script>
    	</head>
    	<body>
    		<div data-bind="visible: myValues().length > 0">    
    　　		<h1>我来也</h1>
    		</div>
    		<input type="button" value="向list中添加数据" onclick="addToList()">
    		<input type="button" value="清空list中数据" onclick="clearList()">
    	</body>
    	<script type="text/javascript">
    		 var AppViewModel = {			
    			myValues: ko.observableArray([])    //定义一个数组      
    		};
    		function addToList(){
    			AppViewModel.myValues.push("data"); //向myValues数组中添加一条数据
    		}
    		function clearList(){
    			AppViewModel.myValues([]);  //清空数组
    		}
    		ko.applyBindings( AppViewModel);  //将数据绑定到页面上
    	</script>
    </html>

效果展示：

页面初始化时，数组中没有数据：

![Center][]

点击向list中添加数据按钮时：

![Center 1][]

点击清空list中数据按钮时：

![Center 2][]

visible的判定依据就是结果是ture还是false,当判断一个list的时候需要注意的是listname().length，这里的listname后需要加上括号，否则就会报错，有兴趣的可以试一下！

[http_www.captainbed.net_zhanghan]: http://www.captainbed.net/zhanghan
[Center]: /images/20220618/115386f4f31d4f1aba0f04a1460aa2d3.png
[Center 1]: /images/20220618/805a08ea8e1245059781e999587cea0a.png
[Center 2]: /images/20220618/c8cece6106bc49f28711c4429467e10b.png