文档章节

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>

© 著作权归作者所有

共有 人打赏支持
吃兔纸不吐毛
粉丝 2
博文 61
码字总数 30280
作品 0
杭州
私信 提问
集成 Knockout 和 Twitter Bootstrap Popover

简介 Knockout 是一个功能强大,非常有用的 javascript 库,用于实现在模板中双向绑定的 MVVM(Model-View-ViewModel) 模式,并有内置的绑定支持来绑定数据到 HTML 元件上去。 Knockout 也支持...

oschina
2014/03/10
613
0
JavaScript的UI库 Knockout.js 3.2 预览:组件

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

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

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

达尔文
2017/03/07
1K
2
Knockout.js 3.5.0 Beta 发布,JavaScript 的 UI 库

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

周其
2017/12/30
668
7
Knockout.js 3.4.1 发布,JavaScript 的 UI 库

Knockout.js 3.4.1 发布了,该版本主要是修复了一些问题,具体如下: 有时不会提取依赖项中的更改(#1975 和 #1992) 当重新订阅 事件时, 数组会内存泄漏(#1973 和 #1974) 在调试模式下导出 ...

局长
2016/11/09
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

C4C销售订单行项目价格维护方法

需求很简单,能够创建销售订单,在行项目里添加产品,带出价格来,同时把总价显示在销售订单抬头区域。 如下图所示: 下面是具体配置。 Business Configuration里,点击Sales Order的配置: ...

JerryWang_SAP
23分钟前
3
0
deepin中配置robot framework环境

本文永久更新地址:https://my.oschina.net/bysu/blog/2989005 【若要到岸,请摇船:开源中国 不最醉不龟归】 1.在终端中输入pip,回车,如果提示没有该命令,则先安转pip sudo apt-get inst...

不最醉不龟归
今天
7
0
OSChina 周日乱弹 —— 钱不还,我就当你人不在了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bigleaf的单曲《小鹿》 《小鹿》- Bigleaf 手机党少年们想听歌,请使劲儿戳(这里) 周日在家做什么? 做手工呀, @poorfis...

小小编辑
今天
173
5
EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
22
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部