【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 ...
随机推荐
- 基于OpenCV的iOS开发笔记(1)
本系列文章采用的的开发环境为: 1)Xcode 6 2)OpenCV for iOS 3.0.0 -------------------分割线---------------------------- ...
- PsLookupProcessByProcessId分析
本文是在讨论枚举进程的时候产生的,枚举进程有很多方法,Ring3就是ZwQuerySystemInformation(),传入SysProcessesAndThreadsInformation这个宏, ...
- oracle 中控制文件中到底记录了哪些信息
oracle 控制文件中的信息 oracle 11g oracle 10g DATABASE ...
- 让人眼花缭乱的 RSS 版本0.90、0.91、0.92、0.93、0.94、1.0 和 2.0
1.0的规范 http://web.resource.org/rss/1.0/spec 2.0的规范 http://cyber.law.harvard.edu/rss/rss.html 一个介绍什么是 ...
- SessionFactory、HibernateTemplate、HibernateDaoSupport之间的关系说明
在接触HibernateTemplate之前,我们知道,在对数据库进行CRUD操作之前,需要开启session.transaction等等.在hibernate学习过程中,我们知道了,得到sessio ...
- JSF教程(10)——生命周期之Update Model Values Phase
在整个JSF生命周期中经历了取值.验证的阶段终于从request中拿到合理的值,以下就是在本阶段给相应的服务端对象(ManageBean)赋值了.JSF实现仅仅是去更新和input组件中value属性 ...
- HDU 5510 Bazinga 暴力匹配加剪枝
Bazinga Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5510 ...
- [Oracle] Group By 语句的扩展 - Rollup、Cube和Grouping Sets
常常写SQL语句的人应该知道Group by语句的主要使用方法是进行分类汇总,以下是一种它最常见的使用方法(依据部门.职位分别统计业绩): SELECT a.dname,b.job,SUM(b.sal ...
- iOS开发——数据解析Swift篇&简单json数据处理
简单json数据处理 //loadWeather var url = NSURL(string: "http://www.weather.com.cn/adat/sk/101240701.h ...
- Flex中 Array 的IndexOf 的作用
Flex中 Array 的IndexOf 的作用 1.说明 indexOf用于在索引中从小到大查找,假设查得到就返回索引值,查不到就返回-1: 2.实例 (1)设计源代码 <?xml ve ...