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解决数据绑定。它们紧紧只是实现页面效果。接下来,还需要真正的学习前端框架,各种常用的组件的学习。通过框架+各种实现的效果才能打造炫裤无比的前端。加油!!

时间: 2024-08-05 12:32:01

Knockout快速扫盲的相关文章

hadoop快速扫盲帖,从零了解hadoop

1.MapReduce理论简介 1.1 MapReduce编程模型 MapReduce采用"分而治之"的思想,把对大规模数据集的操作,分发给一个主节点管理下的各个分节点共同完成,然后通过整合各个节点的中间结果,得到最终结果.简单地说,MapReduce就是"任务的分解与结果的汇总". 在Hadoop中,用于执行MapReduce任务的机器角色有两个:一个是JobTracker:另一个是TaskTracker,JobTracker是用于调度工作的,TaskTracke

基于TI Davinci架构的多核/双核开发快速扫盲(以OMAP L138为例),dm8168多核开发参考以及达芬奇系列资料user guide整理

基于TI Davinci架构的双核嵌入式应用处理器OMAPL138开发入门 原文转自http://blog.csdn.net/wangpengqi/article/details/8115614 感谢wangpengqi的共享. 一.简介 TI的达芬奇架构嵌入式应用处理器使用DSP与ARM结合的非对称多核结构,当然现在也有管脚全兼容的单核.本文要介绍的就是其中的一款低功耗处理器OMAP L138. OMAP L138包括一个主频300M的ARM9处理器内核和一个300M的C6748DSP内核(均

120分钟React快速扫盲教程

在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识时,也方便自己查阅. React既不是一个MVC框架,也不是一个模板引擎,而是Facebook在2013年推出的一个专注于视图层,用来构建用户界面的JavaScript库.它推崇组件式应用开发,而组件(component)是一段独立的.可重用的.用于完成某个功能的代码,包含了HTML.CSS和Jav

KnockOut -- 快速入门

简单示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <!-- <span data-bind="text: personName"></span> --> <h3>Meal upgrades</h3> &

Apache spark 的一些浅见。

一.搬砖 vs. 分布式计算 一个人搬砖很累,几个人一起搬就会轻松很多,也会快很多: 分布并行计算和几个人一起搬砖的意思是一致的,一个资源密集型的任务(搬砖或计算),需要 一组资源(小伙伴或计算节点),并行地完成: 计算任务 => 搬砖 计算节点 => 小伙伴 当计算任务过重时,我们就把计算任务拆分,然后放到多个计算节点上同时执行,这就是分布并行计算. 二.求文件中包含"包租婆"的行数 从一个总计100行的文件中找出所有包含"包租婆"的行数,我们不用太动

[转]线程同步

在情景一.情景二中,我分别介绍了当多线程遇到 “资源争用”.“限量使用” 情形时的解决方案,本篇是本系列的最后一种情形,会介绍几种用于解决线程通信的方案. 情景三:我让你动,你才能动! 大锤:“老板,拿这个手机让我看看”. 大锤:“这是手机吗??? 分别就只是一个壳子”. 老板:“呀,这可能是生产上出了问题,我给你换一个!” 大锤:“老板,你这是当我是傻子呢?还是傻子呢?还是傻子呢? 这回给我的手机怎么没有电源啊!我要怎么开机啊!” 万万没想到,经过千挑万选,最终还是找到了一个配件完整的手机.

MySQL复制异常大扫盲:快速溯源与排查错误全解

MySQL复制异常大扫盲:快速溯源与排查错误全解https://mp.weixin.qq.com/s/0Ic8BnUokyOj7m1YOrk1tA 作者介绍王松磊,现任职于UCloud,从事MySQL数据库内核研发工作,主要负责UCloud云数据库UDB的内核故障排查工作以及数据库新特性的研发工作. 复制作为MySQL原生的数据同步功能,在MySQL高可用架构中起着至关重要的作用.本文梳理了MySQL高可用产品UDB在日常运维中遇到的复制问题,并总结了当复制发生异常时,排查复制异常的方法. 一.

SNF快速开发平台之BS页面展示和九大优点-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

一)经过多年的实践不断优化.精心维护.运行稳定.功能完善: 能经得起不同实施策略下客户的折腾,能满足各种情况下客户的复杂需求. 二)编码实现简单易懂.符合设计模式等理念: 上手快,见效快.方便维护,能控制软件项目后期维护风险. 三)有严谨的分层理念.完全符合主流的SOA理念架构: 程序可以采用不同的实施策略.架构需求,方便维护.方便扩展. 四)符合RBAC的权限理念.同时也能满足国内小型软件项目的灵活性需求: 不仅符合国际通用标准,又能满足国内的小型软件项目的灵活设置需求. 五)不仅支持多数据库

MDD扫盲:使用模型驱动方式进行快速开发(多图预警)

相信很多人跟我一样,不喜欢数据展示.列表分页.数据的增.删.改.查,这种简单又烦琐的搬砖活. 因为很多人跟我一样,所以网上出现很多开源的代码生成工具,在多年前我也写过,根据模版生成简单的View.Action.Service.Dao.Bean(现在想来当时真SB,写了个破东西还洋洋得意):但实际上并没有太大变化,代码生成太死板.不是所以表单数据都可以用input[type='text']来输入的,增删一个字段是要改4人的. 多年以后我尝试用模型驱动开发,基于配置来实现各种各样的功能,控件丰富且一