【Knockout】一、认识Knockout,你会爱上它
介绍
Knockout简称ko,是一个轻量级的javascript类库,采用MVVM设计模式(即Model、view、viewModel),简单优雅的实现了双向绑定,实时更新,帮助您使用干净的数据模型来创建丰富的、响应式的用户界面。
Knockout有三大核心特性:
1.优雅的依赖跟踪(Elegant dependency tracking):任何时候数据模型的变化都会自动更新相应的UI部分;
2.声明式绑定(Declarative bindings) : 简单的将UI和你的数据模型关联起来,你就可以创建复杂的动态UI;
3.高度可扩展性(Trivially extensible) : 只需几行代码实现一个自定义的行为来作为声明式绑定;
其他优点:
1.纯净的javascript代码;
2.可以随时添加到你现有的web应用中;
3.轻量级,GZIP后只有13K;
4.能够工作于几乎所有主流浏览器((IE 6+, Firefox 2+, Chrome, Safari, Edge, others);
ko采用的是MVVM设计模式,即model view viewModel。
简单的例子
There are <span data-bind="text: myItems().length"></span> items
就是这么简单,你不必写代码来更新text内容,它会在数组长度改变时自动更新,与此类似,如果我们想利用数组长度控制按钮的可用性仅仅需要:
<button data-bind="enable: myItems().length < 5">Add</button>
【Knockout】一、认识Knockout,你会爱上它的更多相关文章
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- knockoutJS学习笔记03:knockout简介
通常来说,前端的维护难度是比较大的,特别是脚本,虽然像jquery这样的库可以帮助我们减少很多代码,但在稍微复杂的情况下,还是会产生有很多代码.上一篇介绍了模板引擎jsRender,它可以帮我们快速生 ...
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...
- Knockout应用开发指南 第一章:入门
2011-11-21 14:20 by 汤姆大叔, 20165 阅读, 17 评论, 收藏, 编辑 1 Knockout简介 (Introduction) Knockout是一个轻量级的UI类 ...
- 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...
- Knockout应用开发指南 第十章:更多信息(完结篇)
原文:Knockout应用开发指南 第十章:更多信息(完结篇) 1 浏览器支持 Knockout在如下浏览器通过测试: Mozilla Firefox 2.0+(最新测试版本:3.6.8) Goo ...
- Knockout应用开发指南
Knockout应用开发指南 第一章:入门 2011-11-21 14:20 by 汤姆大叔, 20799 阅读, 17 评论, 收藏, 编辑 1 Knockout简介 (Introductio ...
- Knockout简单用法
Knockout简单用法 在最近做的一个项目中,页面数据全部通过js ajax调用webapi接口获取,也就是说页面的数据全部使用javascript脚本填充,这就想到了使用一个MVVM模式的js框架 ...
- knockout示例
最近项目需要用到knockout js,有关knockout的介绍网上已经很多很多了,但是很少有比较全面的示例,于是乎我就自己做了一个小demo,已备以后查阅.knockout经常和knockout. ...
- Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示.
之前整理了三篇帖子: Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhend ...
随机推荐
- [IoC容器Unity] :Unity预览
1.引言 高内聚,低耦合成为一个OO架构设计的一个参考标准.高内聚是一个模块或者一个类中成员跟这个模块或者类的关系尽量高,低耦合是不同模块或者不同类之间关系尽量简单. 拿咱国家举例来说,假如你是中国人 ...
- opennebula虚拟机启动失败
问题1 故障现象: Wed Jan :: [DiM][I]: New VM state is ACTIVE. Wed Jan :: [LCM][I]: New VM state is PROLOG. ...
- jsp验证码点击刷新
<img src="<%=basePath%>manage/code" alt="验证码" height="20" ali ...
- TC SRM 665 DIV2 B LuckyCycle 暴力
LuckyCycleTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.ac ...
- Unity3D脚本--经常使用代码集
1. 訪问其他物体 1) 使用Find()和FindWithTag()命令 Find和FindWithTag是很耗费时间的命令,要避免在Update()中和每一帧都被调用的函数中使用.在Start() ...
- MapReduce数据连接
对于不同文件里的数据,有时候有相应关系,须要进行连接(join),获得一个新的文件以便进行分析.比方有两个输入文件a.txt,b.txt,当中的数据格式分别例如以下 1 a 2 b 3 c 4 d 1 ...
- sql server where、group by、order by 执行顺序
2012-02-07 19:39 先where 条件1,再 group by 条件2再 order by 条件3 如果声明了 GROUP BY 子句,输出就分成匹配一个或多个数值的不同组里. 如果出现 ...
- python_基本语法
初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...
- hadoop实例---多表关联
多表关联和单表关联类似,它也是通过对原始数据进行一定的处理,从其中挖掘出关心的信息.如下 输入的是两个文件,一个代表工厂表,包含工厂名列和地址编号列:另一个代表地址表,包含地址名列和地址编号列.要求从 ...
- Monolog - Logging for PHP 5.3+
Monolog 是PHP的一个日志类库.相比于其他的日志类库,它有以下的特点: 功能强大.可以把日志发送到文件.socket.邮箱.数据库和各种web services. 遵循 PSR3 的接口规范. ...