Knockout.js on the way

原创 2015年08月14日 19:11:02
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 Mapping plugin v2.4.1.debug.js

  • 2016年09月29日 10:23
  • 26KB
  • 下载

Step by Step - How to create a c++ library with NDK on Android Studio 1.5 (not experimental way)

转载地址:http://kn-gloryo.github.io/Build_NDK_AndroidStudio_detail/ 1. Configure JDK, NDK path envi...

ToDoList-An effective and flexible way to keep on top of your tasks(ToDoList-管理任务的有效工具)

原文地址: http://www.codeproject.com/Articles/5371/ToDoList-6-5-7-Feature-Release-An-effective-and-fl ...

President Obama on the Passing of Steve Jobs: He changed the way each of us sees the world

http://www.unsv.com/material/news/2011/10/06/President_Obama_on_the_Passing_of_Steve_Jobs/ Mi...
  • omg2012
  • omg2012
  • 2011年10月10日 07:56
  • 394

some knockout js and pages

  • 2013年05月17日 12:27
  • 9KB
  • 下载

Knockout.js实战项目视频教程

  • 2015年12月10日 10:13
  • 564B
  • 下载

Install Openvswitch by binary and source way on rhe6.3 ( by quqi99 )

Install Openvswitch by rpm binary and source code way on rhe6.3 ( by quqi99 ) 作者:张华  发表于:2012-1...
  • quqi99
  • quqi99
  • 2012年12月30日 21:09
  • 3471

knockout-2.2.0.js

  • 2012年12月29日 11:39
  • 177KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Knockout.js on the way
举报原因:
原因补充:

(最多只允许输入30个字)