文档章节

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
博文 58
码字总数 29471
作品 0
杭州
用Word和在线工具快速制作6寸PDF

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

yanhua365
2012/11/14
0
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
通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

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

长平狐
2012/09/04
642
0
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.0 发布,JavaScript 的 UI 库

Knockout.js 3.0 发布了,这是一个几乎完全向后兼容的版本,你可以从 2.x 无缝升级。 Knockout 是个JavaScript library,帮助创建丰富的显示和编辑器UI,通过干净的底层数据模型。你可以在任...

oschina
2013/10/26
3.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

centos7安装Nginx

安装所需环境 一. gcc 安装 安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum install gcc-c++ 二. PCRE pcre-devel 安装 PCRE(Perl Co...

狼王黄师傅
30分钟前
1
0
dubbo+apollo微服务开发指南

为了大家比较快速的开发微服务,规范dubbo,spring,mybatis,hessian,netty的版本和用法,我写了一个demo,下面对demo的功能做个简单的介绍,如有疑问的地方,可以私下问我。 微服务项目示例 ...

PageYi
32分钟前
1
0
android流式布局、待办事项应用、贝塞尔曲线、MVP+Rxjava+Retrofit、艺术图片应用等源码

Android精选源码 android模仿淘宝首页效果源码 一款艺术图片应用,采用T-MVVM打造 Android MVP + RxJava + Retrofit项目 android流式布局实现热门标签效果 android仿淘宝客户端商品详情页效果...

Android爱开源
34分钟前
2
0
一步一步安装hive

The Apache Hive ™ data warehouse software facilitates reading, writing, and managing large datasets residing in distributed storage using SQL. Structure can be projected onto d......

hnairdb
37分钟前
2
0
【WebService 系列二 使用JAX-WS开发示例程序】

1、服务端代码 1.1、编写SEI SEI即(Service Endpoint Interface)SEI在ws中称为portType,在java中称为接口 package jaxws.server;/** * @className: HelloService * @description: jax......

HansonReal
47分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部