KnockOut -- 快速入门
简单示例
<!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 -- 快速入门的更多相关文章
- Web Api 入门实战 （快速入门+工具使用+不依赖IIS）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
- SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令（2）
今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...
- 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- Mybatis框架 的快速入门
MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...
- grunt快速入门
快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...
- 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第四篇】ASP.NET MVC快速入门之完整示例（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
随机推荐
- Error "Client wants topic A to have B, but our version has C. Dropping connection."
ROS problem 出现这个问题的原因是话题上的消息类型和订阅节点指定的消息类型不匹配.
- longzhuapp项目笔记
1.配置不同环境的打包命令
- 004_LVS及haproxy
一.lvs工作在哪层(新浪面试题) http://blog.chinaunix.net/uid-346158-id-2131163.html 二.四层.七层负载均衡的区别 所谓四层就是基于IP+端口的 ...
- $Django 等web框架，交互，基础入门
1 web 应用2 c/s 和bs架构3 python中的web框架 a :socket b:路由跟视图函数匹配关系 c:模板渲染 django: uwsgi/wsgiref ...
- zabbix-3.0.4添加对windows 2008r2的监控
zabbix-3.0.4添加对windows 2008r2的监控 一.windows客户端的配置关闭windows防火墙或者开通10050和10051端口(1).关闭防火墙(不推荐直接关闭,测试可以这 ...
- Mac 上卸载 Java
如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...
- Solidworks设计电路外形导入AltiumDesigner
将实际设计好的三维电路图的底板(单个零件模式下)轮廓另存为dwf或者dwg 这时候会出现一个选项框,需要进行一些设置 单位选择mm,这个按照自己的需求选择单位 单位映射选择为1mm,也就是1:1的比例 ...
- python 基础 列表
1.列表list()方法用于将元组转换为列表,[]组成,中间可以放很多内容,每一项使用逗号隔开,列表中可以放置任何数据类型的数据.注:元组与列表是非常类似的,区别在于元组的元素值不能修改,元组是放括号 ...
- 解决：angularjs radio默认选中失效问题
添加ng-model后checked="checked"失效,可见angularjs也不好,会失效html标准属性 解决:添加ng-checked="1" ...
- [C]C语言中的指针和内存泄漏几种情况
引言 原文地址:http://www.cnblogs.com/archimedes/p/c-point-memory-leak.html,转载请注明源地址. 对于任何使用C语言的人,如果问他们C语言的 ...