简单示例

<!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. MySql DDL语言（数据库和数据表的管理）

    数据定义语言,负责数据库和数据表的管理 ⒈数据库的管理 1.创建数据库 create database if not exists DatabaseName; #if not exists可以省略 2 ...

  2. Springboot Session集群处理

    在集群环境下,常见的基于Session的身份认证就会有一个问题,因为Session是跟着服务器走的,当用户在服务器1登陆成功后,当用户在访问服务器2的时候会因为服务器2没有用户的身份信息而再次跳转到认 ...

  3. python判断字符串是字母 数字 大小写

    字符串.isalnum() 所有字符都是数字或者字母,为真返回 Ture,否则返回 False. 字符串.isalpha() 所有字符都是字母,为真返回 Ture,否则返回 False. 字符串.is ...

  4. python下划线，私有变量

      转自:http://blog.sina.com.cn/s/blog_58649eb30100g4zo.html Python用下划线作为变量前缀和后缀指定特殊变量. "单下划线" ...

  5. inception_v2版本《Rethinking the Inception Architecture for Computer Vision》(转载)

    转载链接:https://www.jianshu.com/p/4e5b3e652639 Szegedy在2015年发表了论文Rethinking the Inception Architecture ...

  6. 无法修改linux/ubuntu密码(Authentication token manipulation error )问题解决过程【转】

    转自:https://blog.csdn.net/caizi001/article/details/38659189 Vmware虚拟机里的ubunut系统长期不用,密码忘记了,无奈只能通过slax ...

  7. Python3学习笔记27-ConfigParser模块

    ConfigParser模块在Python3修改为configparser,这个模块定义了一个ConfigeParser类,该类的作用是让配置文件生效.配置文件的格式和window的ini文件相同,大 ...

  8. u3d常用代码小集合

    01.基本碰撞检测代码 function OnCollisionEnter(theCollision : Collision){ if(theCollision.gameObject.name == ...

  9. struts2框架之输入校验（参考第二天学习笔记）

    输入校验: 1. 分类 客户端校验:javascript,它是用户体验而已,可以绕开. 服务器端校验 * 代码校验 1). 要求Action必须继承ActionSupport 2). 重写Action ...

  10. GNU Wget 1.19.1 static built on mingw32

    http://pan.baidu.com/s/1sluFAVj #wget --version GNU Wget 1.19.1 built on mingw32. -cares +digest -gp ...