Knockout快速扫盲
1、Knockout.js是什么？
Knockout是一款很优秀的js库，它可以快速让你使用一个干净整洁的底层数据模型，即可创建一个富文本且具有良好显示和编辑功能的用户界面。任何时候你的ui需要自动更新，ko都能自动帮你快速实现，而且使用非常的简单。
2.重要特性
优雅的依赖追踪--不管任何时候你的数据模型更新，都会更新到相应到内容
声明式绑定--简单的声明方式将你的用户界面指定部分关联到你的数据模型上。
一个简单的数据绑定demo
<body>
The name is <span data-bind="text: lastName"></span>
<script type="text/javascript">
//数据源 一般是js对象
var AppViewModel = {
firstName: ko.observable('Bob111')
}
//绑定数据源
ko.applyBindings(AppViewModel);
</script>
</body>
表格绑定的例子
<body>
<table>
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table> <script type="text/javascript">
var array = {
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
}
ko.applyBindings(array);
</script>
</body>
绑定主要分为几大块，分别是：
1.控制文本和外观的绑定 比如：text ，visible，html，css，style....
2.控制流的绑定 比如上面的foreach，if，with..
3.表单域绑定 比如 Event，enable，checked，option...
我觉得ko的最常用的就是数据绑定，一般事件的话，可以用jq控制
mapping插件
如果遇到页面字段较多的数据绑定情况下，重复体力活会很大，利用mapping可以消除这些重复繁杂的代码。
其他高深的技术...还有待研究
思考？
相比之下普通的数据绑定有什么缺点？
普通的数据绑定和后端结合非常密切，页面复杂难以维护，不好扩展，后端数据变化不能及时响应到ui。通过引入ko，可以将后端和前端做一层隔离，并且增强交互时效性。
jq复杂操作界面元素和事件，ko解决数据绑定。它们紧紧只是实现页面效果。接下来，还需要真正的学习前端框架，各种常用的组件的学习。通过框架+各种实现的效果才能打造炫裤无比的前端。加油！！
Knockout快速扫盲的更多相关文章
- 1.JVM中的五大内存区域划分详解及快速扫盲
本博客参考<深入理解Java虚拟机>这本书 视频及电子书详见:https://shimo.im/docs/HP6qqHx38xCJwcv9/ 一.快速扫盲 1. JVM是什么 JVM是 ...
- 0基础学Java快速扫盲指南，月入2W的基础
学Java,掌握一些基本的概念是第一步,本文简单为大家介绍一些扫盲级别的内容,希望帮助小白快速入门. 一.基本概念 JVM:java虚拟机,负责将编译产生的字节码转换为特定机器代码,实现一次编译多处执 ...
- 翻译：Knockout 快速上手 - 5: 你需要知道的顶级特性 续
Utilities Knockout 提供了许多可以你开发中使用的工具,你可以在 ko.utils 命名空间中找到它们,我最喜欢的工具如下所示: extend: 这个方法将两个对象合并在一起,调用这个 ...
- 翻译：Knockout 快速上手 - 4: 你需要知道的顶级特性
Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何其他的脚本库 ( 甚至 ...
- 翻译：Knockout 快速上手 - 3: knockoutJS 快速上手
许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用,库存管理应用. 应用概览 在创建我们的应用之前,我们需要一个公司,来理解应 ...
- 翻译：Knockout 快速上手 - 2: 安装 knockoutJS
只需要五个简单的步骤,就可以做好使用 Knockout 开发的准备! 第一步 我们需要什么? 最低限度,为了完成后面的教程,你需要如下的准备 Web 浏览器 文本编辑器 你的电脑上大约 2M 的磁盘空 ...
- 120分钟React快速扫盲教程
在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识 ...
- JVM快速扫盲篇
JVM虚拟机基础 JVM虚拟机结构 vm的整体结构大致如下: 类加载器:类加载器用来加载Java类到JVM虚拟机中,源代码程序.java文件在经过编译器编译之后就被转换成字节代码.class文件,类加 ...
- Java快速扫盲指南
文章转自:https://segmentfault.com/a/1190000004817465#articleHeader22 JDK,JRE和 JVM 的区别 JVM:java 虚拟机,负责将编译 ...
随机推荐
- Java的函数与函数重载
关于Java的函数与函数重载 关于Java的函数与函数重载 1. 函数 假设有一个游戏程序,程序在运行过程中,要不断地发射炮弹.发射炮弹的动作都需要使用一段百行左右的程序代码,在每次发射炮弹的地方都要 ...
- R与数据分析旧笔记（三）不知道取什么题目
连线图 > a=c(2,3,4,5,6) > b=c(4,7,8,9,12) > plot(a,b,type="l") 多条曲线效果 plot(rain$Toky ...
- html5 input的type属性启动数字输入法
html5 input的type属性启动数字输入法 当文本框只能输入数字是一个很常见的需求,比如电话号码,身份证号,卡号, 数量....等等只允许数字输入,为了更好的用户体验性,直接写出 启动数字 ...
- 【LeetCode题意分析&解答】40. Combination Sum II
Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...
- WL（Wear leveling）磨损平衡
前面说过,闪存寿命是以P/E次数来计算的,而WL就是确保闪存内每个块被写入的次数相等的一种机制.若没有这个机制,SSD内的闪存颗粒就无法在同一时间内挂掉,那对用户来说就是灾难. 会出现这种 ...
- 如何使用picasso 对Android图片下载缓存
相比较其他,picasso的图片缓存更加简单一些,他只需要一行代码就可以表述:导入相关jar包 Picasso.with(context).load("图片路径").into(Im ...
- android数据库持久化框架
android数据库持久化框架
- 脑波设备mindwave数据流二次开发示例
数据流开发神念科技提供了两个文件ThinkGearStreamParse.h和ThinkGearStreamParse.cpp两个文件,主要接口为: 宏定义: /* Data CODE definit ...
- 12.06 JavaScript
任务 掌握JavaScript基础知识,能够使用JavaScript编写一些复杂度不大的交互功能. 任务: JavaScript基础 做完任务一的时候深深地感觉到自己的基础非常的薄弱,在这里再次感谢一 ...
- 【iOS知识学习】_如何判断手机是否为静音模式
目前我涉及的app要获取系统是否为静音模式,到网上搜了一下,千篇一律的都是一样的,而且都是iOS5.0以前才适应的知识,这个大家去搜一下就会很容易发现,找了很久终于找到一个5.0以后适用的,那位大神的 ...