简单示例

<!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. 使用@Valid和BindingResult验证请求参数的合法性并处理校验结果

    /** * 添加用户,使用@RequestBody将请求体映射到Action方法参数中 * 使用@Valid注解验证请求参数的合法性 * 使用BindingResult处理校验结果 * @param ...

  2. android dm-verity 功能【转】

    转自:https://blog.csdn.net/ee230/article/details/73348344 Android dm-verity 实现原理深入研究 思维导图: dm-verity 说 ...

  3. CLR via C# 中关于装箱拆箱的摘录

     装箱: 为了将一个值类型转换成一个引用类型,要使用一个名为装箱(boxing)的机制.下面总结了对值类型的一个实例进行装箱操作时在内部发生的事情. 1.在托管堆中分配好内存.分配的内存量是值类型的各 ...

  4. Linux将公网ip映射到局域网ip

    测试环境如下: monitor: msc1:公网IP:103.6.164.128 eth0 内网IP:192.168.0.57 eth0内网IP:192.168.0.16 eth1 通过访问monit ...

  5. codeforces 161D Distance in Tree 树上点分治

    链接:https://codeforces.com/contest/161/problem/D 题意:给一个树,求距离恰好为$k$的点对是多少 题解:对于一个树,距离为$k$的点对要么经过根节点,要么 ...

  6. planning深度剖析

    planning深度剖析 结合find命令过滤目录及文件名后缀: find /home/hadoop/nisj/automationDemand/ -type f -name '*.py'|xargs ...

  7. vue路由vue-router的使用

    对于单页应用,官方提供了vue-router进行路由跳转的处理. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种 ...

  8. 035_lua快速入门

    执行下面的脚本用luajit test.lua即可 一.变量及逻辑运算 --number, string, boolean, table, function, thread, userdata, ni ...

  9. hibernate映射关系（多对多）

    Student与Teacher关系多对多(只建了2个实体类) public class Student { private int id; private String name; private S ...

  10. Python2018-字符串中字符个数统计

    1 编写程序,完成以下要求: 统计字符串中,各个字符的个数 比如:"hello world" 字符串统计的结果为: h:1 e:1 l:3 o:2 d:1 r:1 w:1 prin ...