knockoutJs基础1 - 简单的knockoutjs实现
简单的knockoutjs实现
1、knockoutJs是在MVVM的机制下实现的，所以要有view（HTML页面中的DOM标签）和viewModel（JavaScript中的js代码）。
2、在view中通过data-bind进行数据绑定。
3、在js中通过ko.observable()和ko.applyBindings()方法进行绑定。
4、过程
（1）建立html页面
（2）引入jQuery库和knockoutjs库
（3）建立html标签
（4）js代码实现绑定
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='js/jquery-1.10.2.js'></script>
<!--引入knockoutjs库，即knockoutJs安装-->
<script type='text/javascript' src='js/knockout.js'></script>
<meta charset="UTF-8"/>
<title>simple test</title>
</head>
<body>
<!--view 绘制HTML页面，实现knockoutJs绑定<span data-bind="text:personName"> text用于显示文字， 显示名字和年龄-->
The name is <span data-bind="text:personName"></span>
<br>
The age is <span data-bind="text:personAge"></span>
<script type="text/javascript">
//定义用户名和年龄
var name = "Bob";
var age = 12; //给输出的内容进行赋值
//ko.observable 提供参数的动态变化
var myViewModel = {
personName: ko.observable(name),
personAge: ko.observable(age)
};
//通过ko.applyBindings()方法进行绑定
ko.applyBindings(myViewModel);
</script>
</div>
</body>
</html>
knockoutJs基础1 - 简单的knockoutjs实现的更多相关文章
- mysql数据库基础的简单操作指南
最近在学习mysql,本文是做的关于mysql学习的笔记,跟大家分享一下,希望对大家学习mysql知识有所助益.mysql现在几乎已经成了网站建设的主流数据库,很多php网站系统都采用了mysql数据 ...
- ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程总结 ASP.NET Core 基础教程总算是有了个简单 ...
- ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 登录登出 上一章节我们总算完善了注册的功能,而且也添加了一个用户,现 ...
- ASP.NET Core 新增用户 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 新增用户 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 新增用户 上一章节我们实现了一个注册表单,但也留了一些东西还没完成, ...
- ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 用户注册 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 用户注册 上一章节我们终于迁移完了 Identity 的数据,也创建 ...
- ASP.NET Core Identity 迁移数据 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 迁移数据 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 迁移数据 上一章节中我们配置了 ...
- ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 配置 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 配置 上一章节我们简单介绍了下 Id ...
- ASP.NET Core Identity 验证特性 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 验证特性 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 验证特性 上一章节我们简单介绍了 ...
- ASP.NET Core Identity 框架 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Identity 框架 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Identity 框架 前面我们使用了 N 多个章节, ...
随机推荐
- Visual studio 2013安装及单元测试
vs安装过程 单元测试: 创建c#类库 创建单元测试 测试结果
- web安全测试-AppScan
安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的“民工兄弟” ...
- 在shell脚本中进行条件控制以及使用循环
转载请标明:http://www.cnblogs.com/winifred-tang94/ if条件语句语法: if [ 条件表达式 ] then 代码 else 代码 fi 注意:在上面的if条件语 ...
- app store 上架流程
前言:作为一名IOS开发者,把开发出来的App上传到App Store是必须的.下面就来详细介绍下具体流程. 1.打开苹果开发者中心:https://developer.apple.com 打开后点击 ...
- 解决C#的64位打包程序，在64位机器上运行出现BadImageFormatException异常。
转载自:http://msdn.microsoft.com/zh-cn/library/system.badimageformatexception%28v=vs.100%29.aspx BadIma ...
- JS 数组去重！！！
var arr = [1,2,3,1,1,1,3,5,3,6,2]; var newArr=[]; for(var i = 0; i < arr.length-1; i++){ var onOf ...
- Python清理内存中的密码
基本不太好搞.可以参考如下讨论: http://stackoverflow.com/questions/728164/securely-erasing-password-in-memory-pytho ...
- 7、SQL基础整理（子查询）
子查询 (用来进行两个或以上表之间的查询) 1.首先新建一个bumen表和一个haha表,填充数据 2.利用两表进行子查询: --部门人数大于5的部门中最大年龄的人的信息--- select MAX( ...
- 如何重置mysql的密码
如何重置mysql的密码 如果知道密码,则通过以下方式修改: gaurav@gaurav:~$ mysql --user=root --pass mysql Enter password: mysql ...
- iOS-NSThread使用
NSThread: 优点:NSThread 比其他两个轻量级(Cocoa NSOperation.GCD) 缺点:需要自己管理线程的生命周期,线程同步.线程同步对数据的加锁会有一定的系统开销 Coco ...