Javascript之KO介绍

KO是什么?

KO不是万能的,它的出现主要是为了方便的解决下面的问题:

UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态、样式等属性?

UI元素之间关系比较紧密,比如操作一个元素,需要改变另外一个元素的状态?

DOM元素与Js对象之间的数据同步?

前端javascript代码组织不理想?用户输入数据校验、DOM操作、后台交互…,交织在一起?

基础概念一:viewModel

负责处理UI事件的响应,响应用户操作。

负责保存领域模型在前端的变体Model’,比如:Student模型,在UI元素与Model之间同步数据(用户修改input-->ko修改model,反之亦然)

在需要的时候,可以使用Helper方法轻松地从viewModel中剥离出需要传递给Server的数据,通过ajax方式与后台交互。

负责接收Server端发送过来的数据(可能是Ajax请求),更新模型数据,同时更新UI展现。

基础概念二:Observable与computed

纵观KO的所有应用场景,基本上这2个属性至少会用到一个。个人认为这是KO最常使用的东西。他们用法如下:

Observable(监控属性):监控自身属性的变化,向外部发送通知。外部通过subscribe方法来订阅属性的变化事件。

Computed(依赖属性):在早期版本中叫做dependentObservable,它通常依赖于其他的Observable,通过计算得出自己的数据。当依赖项改变的时候,computed属性会接到通知,然后同步更新自身

*这里提2点:

虽然本文称之为“属性”,但是本质上他们是js的function对象,所以访问的时候需要加()号

默认情况下Computed的同步发生在任意的Observable变化的时候,可是某些情况下我们可能不希望它更新的如此频繁,比如用户正在输入的过程中。KO有其他办法来延迟更新,在本系列后面会有专门文章介绍。

本章的重点就是讲解这2个基本属性的用法,在后面的“实例讲解”中会详细说明。

如何激活KO绑定

KO中,绑定是需要激活的,可以理解为把viewModel的数据与Html文档的DOM元素进行分析和关联。

通常是在页面元素、viewModel数据加载完毕之后,就可以激活绑定了。当然你可以在任何时候你想进行绑定的时候来激活。

只需要下面的代码:

var model = new AppViewModel();//实例化一个viewModel

ko.applyBindings(model); //绑定到整个页面

这样KO会在整个Body中寻找需要进行绑定的元素,与viewModel进行绑定。当然你也可以指定绑定的根节点,这样的好处:

可以缩小KO查找绑定的范围(毕竟不是整个页面都需要进行binding)

可以同时使用多个viewModel,分别负责不同区域的绑定(是不是你想要的?haha…)

很简单,加一个参数即可:

var model = new AppViewModel();

ko.applyBindings(model, document.getElementById("Demo1")); //Demo1可能是一个Div

实例讲解:Observable

基本语法

1、定义

var myViewModel = {

personName: ko.observable(‘Bob‘),//定义叫做personName的监控属性

personAge: ko.observable(123)//定义叫做personAge的监控属性

};

2、读取

var a=myViewModel.personName();//a为‘Bob‘

3、写入、连续写入(链式调用)

myViewModel.personName(‘Mary‘).personAge(50);//同时修改了2个属性值

4、订阅属性修改事件

myViewModel.personName.subscribe(function(newValue) {

alert("The person‘s new name is " + newValue);

});

myViewModel.personName(‘换个名字‘);//这时候会弹出alert

Javascript之KO介绍

时间: 2024-08-04 18:31:02

Javascript之KO介绍的相关文章

JavaScript Date对象介绍

Date 日期和时间对象 1. 介绍 Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 2. 构造函数 2.1 new Date() :返回当前的本地日期和时间 参数:无 返回值: {Date} 返回一个表示本地日期和时间的Date对象. 示例: var dt = new Date(); console.log(dt); // => 返回一个表示本地日期和时间的Date对象 2.2 new Date(milliseconds) :把毫秒数转换为Date对象 参数

JavaScript prototype 使用介绍

JavaScript prototype 使用介绍 用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱 用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访

JavaScript Array对象介绍

Array 数组 1. 介绍 数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型. --<JavaScript权威指南(第六版)> 2. 定义 var names = new Array("张三", "李四", "王五"); //或者 var names = ["张三",

( 译、持续更新 ) JavaScript小技巧介绍

感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅.原文 能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力,这对于我来说是件很开心的事.每天仅花上不到2分钟的时间中,你将可以读遍JavaScript这门可怕的语言所呈现给我们的特性:performance(性能), conventions(协议), hacks(代码hack)

异步编程之Javascript Promises 规范介绍

什么是 Promises Promises是一种关于异步编程的规范,目的是将异步处理对象和处理规则进行规范化,为异步编程提供统一接口. 传统的回调函数 说到JavaScript的异步编程处理,通常我们会想到回调函数,如下面的代码: getFileAsync("1.txt", function(error, result){      if(error){          throw error;      }     // 取得成功时的处理 }); 上面的代码定义了一个获取文件内容的

【javascript】BOM介绍

来源:https://github.com/LiHongyao BOM介绍document. frames. history. location. navigator. screen 一.概述 ??BOM(Browers Object Model,浏览器对象模型)是浏览器为JavaScript提供的一个API(Application Programming Interface,应用编程接口),所以它不是原生JavaScript提供的.通过BOM我们可以访问和设置浏览器的一些属性和函数. ??对于

前端--javaScript之简单介绍

一.javaScript(以下简称js)的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿在其IE3.0的产品中搭载了一个Jav

JavaScript的基本介绍

javascript JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成.因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为Jav

JavaScript 严格模式介绍

如我们所知,JavaScript 是一门灵活的语言.其灵活性同样也带来了很多坑,当然也有一些是设计缺陷.比如 一个变量没有声明就赋值,默认是全局变量,如 (function () { a = 3; })(); console.log(window.a); // 输出3 对象有多个重名属性,最后赋值的那个属性会覆盖前面的值.如 var obj = { c: 3, c: 4 } // obj 为 {c:4} 还有什么== , typeof 之类的坑,数不胜数.毕竟 JavaScript 之父设计这门