简单示例

<!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. 利用shell简单监控网络设备的接口状态发出告警

    作者:邓聪聪 #!/bin/sh Date=$(date +%F_%T) iplist=`cat ip.txt |awk '{print $1}'` snmp="hjsz-snmp" ...

  2. Log4PHP日志库使用

    库下载地址: http://logging.apache.org/log4php/download.html 当前测试使用的版本为2.3.0 1.解压缩下载的压缩文件apache-log4php-2. ...

  3. hibernate框架学习第五天：数据查询、投影等

    复习day1环境搭建CRUD操作DB6个核心的APIday2TO PO DO 及其状态切换OID 自然主键 代理主键(uuid)一级缓存 Session绑定 load/get关系1对1 1对多(重点) ...

  4. 转-CSRF&OWASP CSRFGuard

    一. 什么是CSRF?CSRF(Cross-Site Request Forgery)直译的话就是跨站点请求伪造也就是说在用户会话下对某个需要验证的网络应用发送GET/POST请求——而这些请求是未经 ...

  5. 007_ip统计及攻击ip分析

    线上经常有被扫描的DDoS攻击事件,需要集合日志进行分析,这里有两种方法,分别是通过shell和python的方式. 一.shell '''<1>shell一句命令分析 http://bl ...

  6. $Django 模板层(变量、过滤器 、标签)、自定义(模板过滤器，标签)

    1 模版语法之变量:详见源码  -{{ 变量 }}:******重要******{#相当于print了该变量#} {#只写函数名 相当于()执行了#}<p>函数:{{ test }}< ...

  7. ansible笔记（8）：常用模块之系统类模块（二）

    ansible笔记():常用模块之系统类模块(二) user模块 user模块可以帮助我们管理远程主机上的用户,比如创建用户.修改用户.删除用户.为用户创建密钥对等操作. 此处我们介绍一些user模块 ...

  8. ansible笔记（6）：常用模块之命令类模块

    ansible笔记():常用模块之命令类模块 command模块 command模块可以帮助我们在远程主机上执行命令 注意:使用command模块在远程主机中执行命令时,不会经过远程主机的shell处 ...

  9. zabbix3.2监控redis

    redis的监控 .监控脚本 # vim /usr/local/zabbix_agents_3.2.0/scripts/redismonitor.sh #! /bin/bash #Name: redi ...

  10. matlab积分使用

    clc; %清屏 clear; %清除变量 close all; %关闭 syms x; f(x) = x; df = int(f(x),x);%求不定积分 figure; subplot(1,2,1 ...