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. 1.JVM中的五大内存区域划分详解及快速扫盲

    本博客参考<深入理解Java虚拟机>这本书 视频及电子书详见:https://shimo.im/docs/HP6qqHx38xCJwcv9/ 一.快速扫盲 1. JVM是什么   JVM是 ...

  2. 0基础学Java快速扫盲指南,月入2W的基础

    学Java,掌握一些基本的概念是第一步,本文简单为大家介绍一些扫盲级别的内容,希望帮助小白快速入门. 一.基本概念 JVM:java虚拟机,负责将编译产生的字节码转换为特定机器代码,实现一次编译多处执 ...

  3. 翻译:Knockout 快速上手 - 5: 你需要知道的顶级特性 续

    Utilities Knockout 提供了许多可以你开发中使用的工具,你可以在 ko.utils 命名空间中找到它们,我最喜欢的工具如下所示: extend: 这个方法将两个对象合并在一起,调用这个 ...

  4. 翻译:Knockout 快速上手 - 4: 你需要知道的顶级特性

    Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何其他的脚本库 ( 甚至 ...

  5. 翻译:Knockout 快速上手 - 3: knockoutJS 快速上手

    许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用,库存管理应用. 应用概览 在创建我们的应用之前,我们需要一个公司,来理解应 ...

  6. 翻译:Knockout 快速上手 - 2: 安装 knockoutJS

    只需要五个简单的步骤,就可以做好使用 Knockout 开发的准备! 第一步 我们需要什么? 最低限度,为了完成后面的教程,你需要如下的准备 Web 浏览器 文本编辑器 你的电脑上大约 2M 的磁盘空 ...

  7. 120分钟React快速扫盲教程

    在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识 ...

  8. JVM快速扫盲篇

    JVM虚拟机基础 JVM虚拟机结构 vm的整体结构大致如下: 类加载器:类加载器用来加载Java类到JVM虚拟机中,源代码程序.java文件在经过编译器编译之后就被转换成字节代码.class文件,类加 ...

  9. Java快速扫盲指南

    文章转自:https://segmentfault.com/a/1190000004817465#articleHeader22 JDK,JRE和 JVM 的区别 JVM:java 虚拟机,负责将编译 ...

随机推荐

  1. Notepad++使用技法

    Alt+H 隐藏行 Ctrl+Tab  实现在多个打开的窗口间切换 Ctrl+Shift+Q区块注释 Ctrl+K行注释(取消Ctrl+Shift+K) 文件  新建文件 Ctrl+N  打开文件 C ...

  2. 【Android】创建Popwindow弹出菜单的两种方式

    方法一的Activity package com.app.test02; import android.app.Activity; import android.os.Bundle; import a ...

  3. 你需要了解的JS框架

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js       用途:构建数据统计图表,兼容多浏览器 ...

  4. MySQL 数据显示宽度

    例子: 把int 的显示宽度设置为 3 create table t(x int(3) zerofill); insert into t(x) values(1); select x from t; ...

  5. 一段关于 Unix、Linux 和 Windows 的暗黑史

    “SCO 在言语上变得越来越好斗,而且还拒绝展示有关诉讼的任何证据,一切都似乎在表明,SCO只不过是在那里拉虎皮做大旗地狂言乱语.但是,微软 决不会轻易放弃这么可以一个利用这些狂言乱语的好机会.”20 ...

  6. 投资新兴市场和细分市场 good

    新兴市场对程序员来说,就是一种新的语言.一个新的平台.一套新的框架.新兴市场因为刚刚兴起,所以几乎所有人都在同一个起跑线,特别适合后进者.我认识从一个2011年开始学习iOS开发的同学,他能能力中等, ...

  7. VC++中的类的内存分布(上)(通过强制转换,观察地址,以及地址里的值来判断)

    0.序 目前正在学习C++中,对于C++的类及其类的实现原理也挺感兴趣.于是打算通过观察类在内存中的分布更好地理解类的实现.因为其实类的分布是由编译器决定的,而本次试验使用的编译器为VS2015 RC ...

  8. List<T>到XML的序列化与反序列化

    原文 http://hi.baidu.com/shishengli1234/item/f0536f36335390c22f8ec24b Model.RESE_SCH sch1 = new Model. ...

  9. 什么是epoll

    什么是epoll epoll是什么?按照man手册的说法:是为处理大批量句柄而作了改进的poll.当然,这不是2.6内核才有的,它是在2.5.44内核中被引进的(epoll(4) is a new A ...

  10. dp-史上最戳最长最臭代码-hdu-4733-G(x)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4733 题目大意: 定义G(x)=x⊕(x>>1).给两个由0.1.?组成的长度相同的字符 ...