Knockout

Nami_Sup

浏览: 5243 次

最近访客更多访客>>

xh084011250

panhuan

woodding2008

InJavaWeTrust

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (13)

社区版块

存档分类

参考：http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html

因为网上教程太少了，但是客户需要用knockout框架，还是不得不去找，根据网上的来源做了简单的Demo，其实就加了点注释

Demo1:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"></meta>
		<title>ko1</title>
		<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="knockout-3.3.0.js" type="text/javascript"></script>
		<script src="knockout.validation.min.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 显示ViewModel的View -->
		<div>
			<p data-bind="text: firstName"></p>
			<p data-bind="text: lastName"></p>
			<input data-bind="value: firstName"/>
			<input data-bind="value: lastName"/>
		</div>
		<script>
			//定义ViewModel
			var ViewModel = function () {
				this.firstName = "吃兔纸";
				this.lastName = "不吐毛";
			}
			//applyBindings()一定要放最后面，不然无效
			//绑定ViewModel
			ko.applyBindings(ViewModel);
		</script>
	</body>
</html>

Demo2:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"></meta>
		<title>ko2</title>
		<script type="text/javascript" src="knockout-3.3.0.js">
			//首先导入knockoutjs框架
		</script>
	</head>
	<body>
		<!-- 显示ViewModel的View -->
		<h3>午餐时间</h3>
		<p>菜单: 
		<select data-bind="options: availableMeals,
							optionsText: 'mealName',
							value: chosenMeal">
		</select>
		<!-- 通过ko.observable()把值显示在页面 -->
		<p>
			你已选择:
			<b data-bind="text: chosenMeal().description"></b>
			(价格: <span data-bind='text: chosenMeal().extraCost'></span>)
		</p>
		
		<!-- 因为applyBindings()绑定的时候需要在最后面 -->
		<script>
			//定义ViewModel
			//使用KO的时候，通常说是向服务器调用Ajax读写这个存储的模型数据
			var availableMeals = [
				{ mealName: '标准餐', description: '干面包皮', extraCost: 0 },
				{ mealName: '优质餐', description: '新鲜芝士面包', extraCost: 9.95 },
				{ mealName: '豪华餐', description: '牛排和葡萄酒', extraCost: 18.50 }
			];
			
			//var viewModel = {
				//chosenMeal: ko.observable(availableMeals[0])
			//};
			
			//ko.applyBindings(viewModel); 
			
			function viewModel() {
				//可以监控（observe）属性的值并且回应它的变化
				this.chosenMeal = ko.observable(availableMeals[0])
			}

			ko.applyBindings(new viewModel()); 
			
			//applyBindings()一定要放最后面，不然无效
			//绑定ViewModel
			//不知道为什么绑定一个空函数也可以使用availableMeals[]的数据
			//激活knockout
			//ko.applyBindings(availableMeals);
		</script>
	</body>
</html>

Demo3:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"></meta>
		<title>ko5</title>
		<script type="text/javascript" src="jquery.validate.min.js"></script>
		<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="knockout.validation.min.js"></script>
		<script type="text/javascript" src="knockout-3.3.0.js"></script>
	</head>
	<body>
		<p>First name: <input data-bind="value: firstName"/></p>
		<p>Last name: <input data-bind="value: lastName"/></p>
		<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

		<script type="text/javascript">
			var viewModel = {
				firstName: ko.observable("吃兔纸"),
				lastName: ko.observable("不吐毛")
			};

			//dependentObservable()依赖监控属性
			viewModel.fullName = ko.dependentObservable(function () {
				return viewModel.firstName() + " " + viewModel.lastName();
			});

			ko.applyBindings(viewModel);
		</script>
	</body>
</html>

分享到：

Knockout.Validation | Eclipse

2016-04-27 16:24
浏览 453
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Knockout

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Knockout

评论

发表评论

相关推荐

最近访客更多访客>>