简单示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6. </head>
  7. <body>
  9. <!-- <span data-bind="text: personName"></span> -->
  10. <h3>Meal upgrades</h3>
  11. <p>Make your flight more bearable by selecting a meal to match your social and economic status.</p>
  12. Chosen meal:
  13. <select data-bind="	options: availableMeals,
  14. 					optionsText: 'mealName',
  15. 				   	value: chosenMeal"></select>
  16. <p>
  17.     You've chosen:
  18.     <b data-bind="text: chosenMeal().description"></b>
  19.     (price: <span data-bind='text: chosenMeal().extraCost'></span>)
  20.     <br>
  21.     <!-- formatPrice方法 -->
  22.     (price: <span data-bind='text: formatPrice(chosenMeal().extraCost)'></span>)
  23. </p>
  25. </body>
  27. <script type="text/javascript" src="../knockout-3.5.0rc2.debug.js"></script>
  29. <script type="text/javascript">
  30. var availableMeals = [
  31.     { mealName: 'Standard', description: 'Dry crusts of bread', extraCost: 0 },
  32.     { mealName: 'Premium', description: 'Fresh bread with cheese', extraCost: 9.95 },
  33.     { mealName: 'Deluxe', description: 'Caviar and vintage Dr Pepper', extraCost: 18.50 },
  34. ];
  36. var viewModel = {
  37.     chosenMeal: ko.observable(availableMeals[0])   //ko.observable:UI可以监控（observe）
  38. };
  40. ko.applyBindings(viewModel); // 注意：ko. applyBindings需要在上述HTML之后应用才有效
  42. function formatPrice(price) {
  43.     return price == 0 ? "Free" : "$" + price.toFixed(2);
  44. }
  45. </script>
  46. </html>

监控属性(Observables)

demo2-1.observable.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  10.   <body>
  11.     <!-- text绑定注册到自身 -->
  12.     The name is <span data-bind="text: personName"></span>
  13.     <br />The Age is
  14.     <span data-bind="text: personAge"></span>
  15.   </body>
  16.   <script src="../knockout-3.5.0rc2.debug.js"></script>
  17.   <script>
  18.     var myViewModel = {
  19.       personName: "Bob1",
  20.       personAge: 123
  21.     };
  23.     myViewModel = {
  24.       personName: ko.observable("Bob2"),
  25.       personAge: ko.observable(123)
  26.     };
  28.     ko.applyBindings(myViewModel);
  30.     myViewModel.personName("Mary").personAge(111);
  32.   </script>
  33. </html>

demo2-2.fullname.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>Document</title>
  8.   </head>
  10.   <body>
  11.     <!-- text 绑定注册到自身 -->
  12.     The name is <span data-bind="text: fullName"></span>
  13.   </body>
  14.   <script src="../knockout-3.5.0rc2.debug.js"></script>
  15.   <script>
  16.     var viewModel = {
  17.       firstName: ko.observable("Bob"),
  18.       lastName: ko.observable("Smith")
  19.     };
  21.     // 依赖监控属性(Dependent Observables)
  22.     // 这些函数是一个或多个监控属性， 如果他们的依赖对象改变，他们会自动跟着改变。
  23.     //computed == dependentObservable
  24.     viewModel.fullName = ko.dependentObservable(function() {
  25.       return this.firstName() + " " + this.lastName();
  26.     }, viewModel);
  28.     ko.applyBindings(viewModel);
  29.   </script>
  30. </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. CF1099F Cookies

    题目地址:CF1099F Cookies 树形dp套树形数据结构 对每个节点 \(i\) ,分两步进行: 1.令 \(f_i\) 为Mitya在节点 \(i\) 停止游戏最多可以吃到多少块饼干 我们可 ...

  2. 2018牛客暑期ACM多校训练营第一场（有坑未填）

    (重新组队后的第一场组队赛 也是和自己队友的一次磨合吧 这场比赛真的算是一个下马威吧……队友上手一看 啊这不是莫队嘛 然后开敲 敲完提交发现t了 在改完了若干个坑点后还是依然t(真是一个悲伤的故事)然 ...

  3. python进程.线程和协程的总结

    I.进程: II.多线程threading总结 threading用于提供线程相关的操作,线程是应用系统中工作的最小单位(cpu调用的最小单位). Python当前版本的多线程没有实现优先级,线程组, ...

  4. 关于softmax、argmax、softargmax

    在阅读LIFT:Learned Invariant Feature Transform一文时,文中第1节提到为了保证端到端的可微性,利用softargmax来代替传统的NMS(非极大值抑制)来挑选极值 ...

  5. Python-集合的常用操作

    #!/usr/bin/env python # -*- coding:utf- -*- # Author:Irving list_1 = [,,,,,,,] list_1 = set(list_1) ...

  6. CentOS7利用systemctl添加自定义系统服务【转】

    systemctl enable name.service 设置开机启 systemctl disable name.service 删除开机启动指令 systemctl list-units --t ...

  7. 题解-Codeforces710F String Set Queries

    咕了好久没更博客,最近得知可以去冬眠营玩耍,还可以搭顺风车回广州过年 (最近做到的比较有意思的题目:bzoj3958.hihocoder1419) Problem Codeforces-710F--洛 ...

  8. Centos6.8实现SVN提交后自动更新目录

    1.创建svn目录 mkdir /var/www/project 2.从服务器的本地svn上checkout最新版本代码到www目录下的project文件夹,注意本地svn服务器地址和端口号是在启动s ...

  9. 高效的多维空间点索引算法 — Geohash 和 Google S2

    原文地址:https://www.jianshu.com/p/7332dcb978b2   引子 每天我们晚上加班回家,可能都会用到滴滴或者共享单车.打开 app 会看到如下的界面:     app ...

  10. 035_lua快速入门

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