Knockout.js on the way

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" onclick="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" onclick="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

阅读更多
文章标签: Knockout.js
个人分类: js
上一篇Spring MVC 在JSP中获取service层的Bean对象
下一篇Git on the way
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭