简单示例

<!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. NMON使用以及nmon_analyse生成分析报表

    在我们监控我们的操作系统的时候如果可以把各个硬件的监控信息生成形象化的分析报表图对于我们来说是件太好的事情了,而通过ibm的nom和nmon_analyser两者的结合完全可以实现我们的要求.首先对n ...

  2. better-scroll和swiper使用中的坑

    better-scroll  1.我的 better-scroll 初始化了, 但是没法滚动. 按照文档使用后,发现可以原生滚动,但是不能弹性滑动,后面发现是最外层容器没给设置固定高度   ,设置固定 ...

  3. 【转】线程join()方法的含义

    在很多情况下,主线程生成并启动了子线程,如果子线程里要进行大量的耗时运算,主线程往往将于子线程之前结束,但是如果主线程处理完其它事务后,需要用到子线程的处理结果,也就是主线程需要等待子线程执行完成之后 ...

  4. jQuery中如何实现多库并存?

    多库共存就是“$ ”符号的冲突. 方法一: 利用jQuery的实用函数$.noConflict();这个函数归还$的名称控制权给另一个库,因此可以在页面上使用其他库.这时,我们可以用"jQu ...

  5. 前端跨域问题的总结&&nodejs 中间层的路由转发

    前后端交互的时候,跨域是避不开的问题. 总结就是如下: 1.Cors 我在做前后端分离的时候,会采用cors 的方法:便于其他源的调用接口,这个可以设置成任意的源头,也可以允许指定的源头. 下面的是n ...

  6. Lua学习总结

    由于一些工作上的需要,开始对Lua的学习.之前有JavaScript的基础,而且两者都是脚本语言,所以本总结旨在列出与JavaScript不同的地方,方便后续的回顾和学习.下面进入正题吧! 1.注释 ...

  7. python第13天

    装饰器 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何改动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. 装饰器的应用场景:比如插入日志,性能测试,事务处理,缓存等等 ...

  8. 解决：org.xml.sax.SAXParseException: 元素类型 "head" 必须由匹配的结束标记 "</head>问题

    事件背景: 今天就碰到了这样的问题, org.xml.sax.SAXParseException: 元素类型 "head" 必须由匹配的结束标记 "</head&g ...

  9. pipeline

    执行顺序:pipeline 写 pipeline类class Scrapyproject1Pipeline(object): def process_item(self, item, spider): ...

  10. VUE 图片验证码

    1. 概述 1.1 说明 在开发过程中,有时候需要使用图片验证码进行增加安全强度,在点击图片时更新新的图片验证码,记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 <templat ...