简单示例

<!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. golang interface 转 string,int,float64

    func interface2String(inter interface{}) { switch inter.(type) { case string: fmt.Println("stri ...

  2. [转]python3之os与sys模块

    转自:https://www.cnblogs.com/zhangxinqi/p/7826872.html#_label8 阅读目录 一.Python os模块 1.os.access() 2.os.c ...

  3. Deep Learning Tutorial - Convolutional Neural Networks(LENET)

    CNN很多概述和要点在CS231n.Neural Networks and Deep Learning中有详细阐述,这里补充Deep Learning Tutorial中的内容.本节前提是前两节的内容 ...

  4. tar.gz压缩，查看，解压

    本次使用的压缩格式是*.tar.gz,用到的命令如下: 压缩: tar -czf jpg.tar.gz *.jpg //将目录里所有jpg文件打包成jpg.tar后,并且将其用gzip压缩,生成一个g ...

  5. Wireshark技巧-过滤规则和显示规则【转】

    转自:https://www.cnblogs.com/icez/p/3973873.html Wireshark是一个强大的网络协议分析软件,最重要的它是免费软件. 过滤规则 只抓取符合条件的包,在W ...

  6. boost::asio实现一个echo服务器

    以前使用ACE实现Server框架,但是觉得太笨重,决定采用boost.asio来写服务器程序: 1.服务器构建在linux上面:当然也可以在windows下运行 2.io部分采用非阻塞模式.业务逻辑 ...

  7. socket 通信 error：88

    调用函数(setsockopt)来设置 recv buffer 和send  buffer时报错: setsockopt error: Socket operation on non-socket(e ...

  8. web@css高级选择器(after，befor用法),基本css样式

    1.高阶选择器:子代后代,相邻通用兄弟,交集并集,属性,伪类,伪元素子代后代选择器 div>p{}  div p{}相邻通用兄弟 div+p{}  div~p{}理解:div同学的同桌p  di ...

  9. tcpdump抓取mysql语句

    抓包工具tcpdump的使用,抓取具体的sql语句 [root@test7_chat_api_im ~]# tcpdump -s -l - |strings tcpdump: listening on ...

  10. SQL Server 之 子查询与嵌套查询

    当由where子句指定的搜索条件指向另一张表时,就需要使用子查询或嵌套查询. 1 子查询 子查询是一个嵌套在select.insert.update或delete语句或其他子查询中的查询.任何允许使用 ...