简单示例

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
</head>
<body> <!-- <span data-bind="text: personName"></span> -->
<h3>Meal upgrades</h3>
<p>Make your flight more bearable by selecting a meal to match your social and economic status.</p>
Chosen meal:
<select data-bind=" options: availableMeals,
optionsText: 'mealName',
value: chosenMeal"></select>
<p>
You've chosen:
<b data-bind="text: chosenMeal().description"></b>
(price: <span data-bind='text: chosenMeal().extraCost'></span>)
<br>
<!-- formatPrice方法 -->
(price: <span data-bind='text: formatPrice(chosenMeal().extraCost)'></span>)
</p> </body> <script type="text/javascript" src="../knockout-3.5.0rc2.debug.js"></script> <script type="text/javascript">
var availableMeals = [
{ mealName: 'Standard', description: 'Dry crusts of bread', extraCost: 0 },
{ mealName: 'Premium', description: 'Fresh bread with cheese', extraCost: 9.95 },
{ mealName: 'Deluxe', description: 'Caviar and vintage Dr Pepper', extraCost: 18.50 },
]; var viewModel = {
chosenMeal: ko.observable(availableMeals[0]) //ko.observable:UI可以监控(observe)
}; ko.applyBindings(viewModel); // 注意:ko. applyBindings需要在上述HTML之后应用才有效 function formatPrice(price) {
return price == 0 ? "Free" : "$" + price.toFixed(2);
}
</script>
</html>

监控属性(Observables)

demo2-1.observable.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head> <body>
<!-- text绑定注册到自身 -->
The name is <span data-bind="text: personName"></span>
<br />The Age is
<span data-bind="text: personAge"></span>
</body>
<script src="../knockout-3.5.0rc2.debug.js"></script>
<script>
var myViewModel = {
personName: "Bob1",
personAge: 123
}; myViewModel = {
personName: ko.observable("Bob2"),
personAge: ko.observable(123)
}; ko.applyBindings(myViewModel); myViewModel.personName("Mary").personAge(111); </script>
</html>

demo2-2.fullname.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head> <body>
<!-- text 绑定注册到自身 -->
The name is <span data-bind="text: fullName"></span>
</body>
<script src="../knockout-3.5.0rc2.debug.js"></script>
<script>
var viewModel = {
firstName: ko.observable("Bob"),
lastName: ko.observable("Smith")
}; // 依赖监控属性(Dependent Observables)
// 这些函数是一个或多个监控属性, 如果他们的依赖对象改变,他们会自动跟着改变。
//computed == dependentObservable
viewModel.fullName = ko.dependentObservable(function() {
return this.firstName() + " " + this.lastName();
}, viewModel); ko.applyBindings(viewModel);
</script>
</html>

The name is Bob Smith

KnockOut -- 快速入门的更多相关文章

  1. Web Api 入门实战 (快速入门+工具使用+不依赖IIS)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  2. SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  3. 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令(2)

    今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...

  4. 【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. Mybatis框架 的快速入门

    MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...

  7. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...

  8. 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. 【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

随机推荐

  1. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  2. [转]Install Windows Server 2012 in VMware Workstation

    本文转自:http://kb4you.wordpress.com/2012/06/28/install-windows-server-2012-in-vmware-workstation-2/ Thi ...

  3. ASP.NET JQuery 随笔-搜索框默认提示

    一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...

  4. 怎样将IPhone应用程序软件公布到应用程序商店?

    转自:http://www.shtion.com/667.html 怎样将IPhone应用程序软件公布到应用程序商店? 2009年10月19日公布 分类: App store, iphone, 手机应 ...

  5. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  6. centos7 删除swap

    https://www.refmanual.com/2016/01/08/completely-remove-swap-on-ce7/#.W8AaSRMzaRs 删除不干净,启动不起来的情况下.需要从 ...

  7. 初识C#程序结构

    一.编写第一个C#程序.注释:   1.编写程序   static void Main(string[] args)//在Mian方法下编写代码输出数据         {             C ...

  8. php 文件缓存类

    //文件缓存类 class FileCache { private $cacheTime = 3600; //默认缓存时间 秒 private $cacheDir = './filecache'; / ...

  9. 开启虚拟机所报的错误:VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the program, access all directories the program uses, and access all directories for temporary fil

    当我们开启虚拟机时出现错误: VMware Workstation cannot connect to the virtual machine. Make sure you have rights t ...

  10. 【bzoj2809】[Apio2012]dispatching (左偏树)

    我们需要枚举根,然后从其子树内选尽量多的点,薪水不超过M,可是暴力复杂度不对.于是考虑自下而上合并树(开始每棵树内只有一个节点,就是自己) 每个树是一个堆,我们维护树的节点个数和薪水总和,合并时,不断 ...