文档章节

Knockout

吃兔纸不吐毛
 吃兔纸不吐毛
发布于 2016/12/09 16:08
字数 518
阅读 2
收藏 0
点赞 0
评论 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
博文 54
码字总数 28636
作品 0
杭州
Knockout.js 2.2 发布,JavaScript UI 库

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

oschina ⋅ 2012/10/30 ⋅ 2

通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

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

长平狐 ⋅ 2012/09/04 ⋅ 0

JavaScript的UI库 Knockout.js 3.2 预览:组件

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

oschina ⋅ 2014/06/14 ⋅ 4

Knockout.js 3.4.2 发布,JavaScript 的 UI 库

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

达尔文 ⋅ 2017/03/07 ⋅ 2

Knockout.js 3.4.1 发布,JavaScript 的 UI 库

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

局长 ⋅ 2016/11/09 ⋅ 5

个人整理的Knockout.js文档,有兴趣的朋友可以直接下载!

上周四在看Knockout.js的官方文档,阅读过程中顺便将其整理成了一份完整的文档,如果你此有兴趣,可以从这里下载。 P.S. Knockout.js简介[来自百度百科] Knockout是一个轻量级的UI类库,通过...

长平狐 ⋅ 2012/09/04 ⋅ 0

Knockout.js 3.0 发布,JavaScript 的 UI 库

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

oschina ⋅ 2013/10/26 ⋅ 1

Knockout.js 3.5.0 Beta 发布,JavaScript 的 UI 库

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

周其 ⋅ 2017/12/30 ⋅ 7

Web 技能树--skilltree

skilltree 是 Web 开发技能树。skilltree 基于 Knockout.js。在线演示:http://www.dungeonsanddevelopers.com/。

叶秀兰 ⋅ 2015/03/02 ⋅ 0

WEB前端工程师一定要会解决浏览器的兼容性?

目前对前端感兴趣。 不过,只对使用各种js框架和CSS框架感兴趣。现在基本能实践前端MVVN,使用knockout.js。 对手写CSS,然后处理浏览器之间的区别,基本没兴趣。 我想问下,WEB前端工程师一...

李渊 ⋅ 2012/05/13 ⋅ 16

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部