Knockout.js on the way

最新推荐文章于 2022-01-23 15:32:19 发布

ylxb23

最新推荐文章于 2022-01-23 15:32:19 发布

阅读量563

点赞数

分类专栏： js 文章标签： Knockout.js

本文链接：https://blog.csdn.net/u012342408/article/details/47665997

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Knockout.js秉承的是MVVM开发模式，不同于MVC模式，所谓的MVVM（Model View ViewModel）开发模式是通过在view层声明数据绑定来和其他层分离的。详细的MVVM模式可以查看 “这里”。

更多的学习资料有：

帅哥的个人网站：http://knockout.com.cn/topic/554b4abc51c2814719118768

帅哥的github：https://github.com/knockoutcn/knockoutcn.github.io/issues/10

Knockout官网：http://knockoutjs.com/documentation/introduction.html

先贴一个DEMO：

<!DOCTYPE HTML>
<html>
	<head>
		<meta content="text/html, charset=utf-8" />
		<script type='text/javascript' src='knockout-3.3.0.js'></script> 
		<title>KNOCKOUT JS 练习</title>
	</head>
	
	<body>
		<input type="text" data-bind="value: firstname" />
		<br/>
		<input type="text" data-bind="value: lastname" />
	</body>
	<script type="text/javascript">
		var vm01 = {	// KO使用的JSON格式数据作为VIEW绑定
			firstname: 'Leo',
			lastname: 'Zeng'
		}
		
		/** ‘ko’即‘knockout’简称，即类似JQuery中使用‘$’作为声明 */
		ko.applyBindings(vm01);	// 激活Knockout，绑定View Model对象
		
	</script>
</html>

这个简单的Demo实现的就是使用JSON数据作为KO（Knockout.js简称）的在View蹭需要绑定的数据，通过

		ko.applyBindings(vm01);	// 激活Knockout，绑定View Model对象

将KO这个ViewModel将数据（Model）与View绑定起来，嗯嗯，我是这么理解的。以上的Demo的展示效果即如下：

接着深入。

<!DOCTYPE HTML>
<html>
	<head>
		<meta content="text/html, charset=utf-8" />
		<script type='text/javascript' src='knockout-3.3.0.js'></script> 
		<title>KNOCKOUT JS 练习</title>
	</head>
	<body>
		<input type="text" data-bind="value: firstname" disabled="disabled" />
		<br/>
		<input type="text" data-bind="value: lastname" disabled="disabled" />
		<hr/>
		
		<input type="text" data-bind="value: firstname" />
		<br/>
		<input type="text" data-bind="value: lastname" />
		<hr/>
		
		<input type="button" οnclick="changeValue()" value="改变值" />
	</body>
	<script type="text/javascript">
		var vm01 = {	// KO使用的JSON格式数据作为VIEW绑定
			firstname: ko.observable('Leo'),	// 添加 ko.observable() 声明属性值，当该值改变时（焦点离开原来位置），该属性所在的DOM元素中的值会相应的改变
			lastname: ko.observable('Zeng')		// 即达到了自动更新VIEW的目的
		}
		
		ko.applyBindings(vm01);	// 激活Knockout，绑定View Model对象
		<!------------------------->
		console.log(vm01.firstname() +', '+ vm01.lastname());
		<!------------------------->
		
		function changeValue() {
			/** 此处值的改变将会直接改变vm01数据中的值 */
			/** 同时，DOM元素上对应的值也会随之改变 */
			vm01.firstname('hahahahahaha');
			vm01.lastname('kekekekekeke');
			console.log('changeValue后: ' + vm01.firstname() +', '+ vm01.lastname());
		}
	</script>
</html>

以上的Demo注意23、24行，在每个值使用ko.observable()“包装”起来了，其他基本不变。这样，当在下面的input中改变值，当失去焦点后，其上面的input中对应的值也会发生改变（使用“textInput”绑定的时候则即输入即改变），*_*好神奇。

继续。其他代码不变，贴主要代码：

<body>
		<input type="text" data-bind="value: firstname" disabled="disabled" />
		<br/>
		<input type="text" data-bind="value: lastname" disabled="disabled" />
		<hr/>
		
		<input type="text" data-bind="value: firstname" />
		<br/>
		<input type="text" data-bind="value: lastname" />
		<hr/>
		
		<input type="button" οnclick="changeValue()" value="ChangeValue" />
		<br/>
		<hr/>
		firstname & lastname is <span data-bind="text: fullname" style="color: red;" ></span>
	</body>
	<script type="text/javascript">
		var vm01 = {	// KO使用的JSON格式数据作为VIEW绑定
			firstname: ko.observable('Leo'),	// 添加 ko.observable() 声明属性值，当该值改变时（焦点离开原来位置），该属性所在的DOM元素中的值会相应的改变
			lastname: ko.observable('Zeng'),	// 即达到了自动更新VIEW的目的
			fullname: ko.observable()
		}
		
		vm01.fullname = ko.pureComputed(function() {
			return vm01.firstname() + '.' + vm01.lastname();
		});
		
		ko.applyBindings(vm01);	// 激活Knockout，绑定View Model对象
		<!------------------------->
		console.log(vm01.firstname() +', '+ vm01.lastname());
		<!------------------------->
		
		function changeValue() {
			/** 此处值的改变将会直接改变vm01数据中的值 */
			/** 同时，DOM元素上对应的值也会随之改变 */
			vm01.firstname('Leo changed');
			vm01.lastname('Zeng changed');
			
			console.log('changeValue后: ' + vm01.firstname() +', '+ vm01.lastname());
		}
	</script>

注意：不同的DOM显示内容的属性值不同，如<input>的是value，<span>的为text等。

这个Demo的改进即是将firstname和lastname相加，形成fullname，即有一下部分代码完成：

		vm01.fullname = ko.pureComputed(function() {
			return vm01.firstname() + '.' + vm01.lastname();
		});

哇咔咔、、、

了解更多，中文看帅哥的个人站，英文看官方Documentation，吼吼

继续深入Knockout.js，查看爱编程Knockout.js介绍： http://www.w2bc.com/Article/25175。

ylxb23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Knockout.js on the way

Knockout.js秉承的是MVVM开发模式，不同于MVC模式，所谓的MVVM（Model View ViewModel）开发模式是通过在view层声明数据绑定来和其他层分离的。详细的MVVM模式可以查看“这里”。更多的学习资料有：帅哥的个人网站：http://knockout.com.cn/topic/554b4abc51c2814719118768帅哥的gith
复制链接

扫一扫