初识KnockoutJS
来源:互联网 发布:sqlserver聚合函数 编辑:程序博客网 时间:2024/05/22 06:59
1. Knockout简介 (Introduction)
Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。
Knockout有如下4大重要概念:
- 声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
- UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI界面将自动更新。
- 依赖跟踪 (Dependency Tracking):为转变和联合数据,在你的模型数据之间隐式建立关系。
- 模板 (Templating):为您的模型数据快速编写复杂的可嵌套的UI。
简称:KO
官方网站:http://knockoutjs.com
2. 入门介绍 (Getting started)
KO工作原理及带来的好处
Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。
重要特性:
- 优雅的依赖追踪- 不管任何时候你的数据模型更新,都会自动更新相应的内容。
- 声明式绑定- 浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。
- 灵活全面的模板- 使用嵌套模板可以构建复杂的动态界面。
- 轻易可扩展- 几行代码就可以实现自定义行为作为新的声明式绑定。
额外的好处:
- 纯JavaScript类库 – 兼容任何服务器端和客户端技术
- 可添加到Web程序最上部 – 不需要大的架构改变
- 简洁的 – Gzip之前大约25kb
- 兼容任何主流浏览器 (IE 6+、Firefox 2+、Chrome、Safari、其它)
- Comprehensive suite of specifications (采用行为驱动开发) - 意味着在新的浏览器和平台上可以很容易通过验证。
开发人员如果用过Silverlight或者WPF可能会知道KO是MVVM模式的一个例子。如果熟悉 Ruby on Rails 或其它MVC技术可能会发现它是一个带有声明式语法的MVC实时form。换句话说,你可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式… 不管它为你做什么
3. 接下来是个基本的小例子
<!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> <form> <input data-bind="value:name,valueUpdate:'input',event:{change:autoSave}" /> <p>Your name: <!--ko text: name--> <!--/ko--> </p> </form> <script src="knockout.js"></script> <script type="text/javascript"> var user = {}; user.name = ko.observable(); user.autoSave = function () { alert(user.name()) } ko.applyBindings(user, document.querySelector('body')) </script></body></html>
当你在输入框中输入字符的时候,Your name处就会显示你所输入的内容,并且当你从输入框blur的时候,也会触发autoSave方法。
我们只用操纵对象user就能引起页面上的变化
例子完整代码:https://github.com/edwin-su/front-end/tree/master/Knockout/Knockout%20Example1
阅读全文
0 0
- 初识KnockoutJS
- knockoutjs一 关于knockoutjs
- Knockoutjs介绍
- knockoutjs visible
- Knockoutjs介绍
- KnockoutJS 实例
- KnockoutJS简介
- knockoutjs介绍
- knockoutJS学习指南
- KnockOutJS入门
- 初步认识knockoutjs
- Knockoutjs环境搭建
- knockoutjs的学习
- knockOutJs学习-1
- knockOutJs学习-2
- knockoutjs的使用
- knockoutjs 学习资料网址
- KnockOutJS学习系列
- CodeForces 327 C.Magic Five(快速幂)
- 脱标流下的css定位 及其引发的思考总结
- js实现图片上传的预览效果
- 技术点-hibernate关系映射-一对一映射
- poj2229
- 初识KnockoutJS
- Android Bitmap大量使用不产生OOM之“加载大图片资源优化”
- windows下编译openssl
- 解决Android 5.1物理键盘与软键盘的同时使用
- JAVA定时器Timer的使用
- Java学习总结之基本语法
- 配置Django框架为生产环境的注意事项(DEBUG=False)
- 回归分析
- PyQGIS开发 -- 环境搭建