文档章节

Knockout

吃兔纸不吐毛
 吃兔纸不吐毛
发布于 2016/12/09 16:08
字数 518
阅读 2
收藏 0

参考: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>

© 著作权归作者所有

共有 人打赏支持
吃兔纸不吐毛
粉丝 1
博文 56
码字总数 29223
作品 0
杭州
用Word和在线工具快速制作6寸PDF

最近在看Play2和Knockout的在线文档,时间实在不够用,便打算做成6寸的PDF放到电子书里在地铁上看。懒得装什么PDF处理的软件,便想试着用现有的软件和一些在线的工具来做。其实非常的简单: ...

yanhua365
2012/11/14
0
0
通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

较之面向最终消费者的网站,企业级Web应用对用户体验的要求要低一些。不过客户对“用户体验”的要求是“与日俱增”的,很多被“惯坏了”的用户已经不能忍受Postback带来的页面刷新,所以Aja...

长平狐
2012/09/04
642
0
Knockout.js 2.2 发布,JavaScript UI 库

Knockout.js 2.2 发布了,Knockout 是个JavaScript library,帮助创建丰富的显示和编辑器UI,通过干净的底层数据模型。你可以在任何时候动态更新UI的选择部分。 Knockout.js 2.2 主要改进内容...

oschina
2012/10/30
4.3K
2
JavaScript的UI库 Knockout.js 3.2 预览:组件

JavaScript 的 UI 库 Knockout.js 3.2 预览:组件。Knockout 3.2 将会提供开箱即用的新功能,通过创建组件来实现。组件可以一步联结模板和数据(视图模块)。更多组件内容介绍请看发行说明。...

oschina
2014/06/14
2.9K
4
Knockout.js 3.4.2 发布,JavaScript 的 UI 库

Knockout.js 3.4.2 发布了。Knockout 是个 JavaScript library,帮助创建丰富的显示和编辑器 UI,通过干净的底层数据模型。你可以在任何时候动态更新 U I的所选择部分。 更新内容: 从循环计...

达尔文
2017/03/07
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Akka的Actor生命周期《Eight》译

Actor在创建时出现,然后在用户请求时停止。每当一个Actor停止时,它的所有孩子也会被递归停止。此行为极大地简化了资源清理,并有助于避免资源泄漏,例如由打开的套接字和文件引起的资源泄漏...

woshixin
7分钟前
0
0
Python 线程 条件锁 生产者消费者模型

创建多个生产者和消费者,并且加上条件锁,避免线程冲突 import threadingfrom threading import Threadfrom threading import Conditionimport timeimport randomc = Conditi...

阿豪boy
24分钟前
0
0
【七】组合Action

本章描述了常用定义Action的方法。 自定义action builders 我们在action一章已经看过如何声明一个action——有request parameter、无request parameter、有body parser等等。你可以在 asynch...

Landas
40分钟前
0
0
Spring Boot实战之基础回顾

本文作者: 吴伟祥 本文链接: https://wuweixiang.cn/2018/08/21/Spring-Boot实战之基础回顾/ 版权声明: 本博客所有文章除特别声明外均为原创,采用CC BY-NC-SA 4.0 许可协议。转载请在文章开...

吴伟祥
40分钟前
0
0
OAuth认证开发

提示: 以下测试是基于项目安装成功,初始化数据库(initial_db.ddl, oauth.ddl, initial_data.ddl)后的测试, 也可在页面上点击"client_details"菜单里进行测试 方式1:基于浏览器 (grant_type=...

舒文joven
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部