KnockoutJS 3.X API 第二章 数据监控(1)视图模型与监控

转载 2018年04月16日 23:18:19

数据监控

KO的三个内置核心功能:

  1. 监控(Observable)和依赖性跟踪(dependency tracking)
  2. 声明绑定(Declarative bindings)
  3. 模板(Templating)

在这个页面上,您将了解三种核心功能的第一种。但在此之前,让我们来看看MVVM模式的概念和视图模型的概念

MVVM模式和视图模型

模型-视图-视图模型(MVVM)是用于构建用户界面的设计模式。它描述了如何将复杂的UI分割成三个部分

  • 模型:应用程序所存储的数据,这个数据代表了你的业务领域对象和操作(例如,可以进行资金转账的银行账户),并独立于任何用户界面。当使用KO,通常会用Ajax调用一些服务器端API将数据读取和写入此存储模式
  • 视图模型:可理解为UI上的数据呈现和操作后的数据暂存的表示。例如,如果你查看一个列表,视图模型将一系列的数据展示并暴露相关操作(添加和删除项目)的方法。

需要注意的是,视图模型并不参与UI的呈现方式:它不具有按钮或显示样式的任何概念,不是持久化数据模型,它是用户正在查看或未保存的数据。当使用KO,你的视图模型是纯JavaScript对象。

  • 视图:代表MVVM模式状态的可见部分,用户的互动界面。它显示从视图模型的信息,发送命令道视图模型(例如,当用户点击按钮)。当使用KO,视图是简单地声明绑定到其视图模型的HTML文档。另外,也可以使用视图模型的数据生成HTML模板。

要创建具有KO视图模型,只是声明任何JavaScript对象。例如:

var myViewModel={
   personName:'Bob',
   personAge:123
};

然后,您可以创建一个非常简单的视图使用声明绑定这一观点模型。例如,下面的标记显示personName值:

The name is <span data-bind="text:personName"></span>

激活KO的绑定关系

该data-bind属性不属于HTML的基础元素属性,但是还是可以正常运行的。但由于浏览器不知道这意味着什么,你需要激活KO的绑定关系,使之生效。

要激活KO的绑定关系,在<script>模块中添加一行代码:

ko.applyBings(myViewModel);

您可以把脚本写在HTML文档的底部,或者你可以把它写在HTML文档顶部并在文档DOM就绪后处理,如使用jQuery的$功能。这就行了!现在,您的视图将显示写下面的HTML:

The name is <span>Bob</span>

ko.applyBings的参数

第一个参数是要告诉KO,你要绑定的视图模型是哪个。

你可以传递第二个参数是定义要搜索该文档的那一部分data-bind属性。例如,ko.applyBindings(myViewModel,document.getElementById('someElementId'))。这限制激活绑定视图模型的范围在HTML元素的ID元素为someElementId及其子元素,如果你想有多个视图模型的激活绑定或者每个页面的不同区域进行模型绑定的话这种方式是很有用的。

监控(Observable)

Ok,你已经看到了如何创建一个基本视图模型以及如何显示绑定的属性。但是KO的主要好处是,它会根据视图模型变化自动更新你的UI。KO如何知道什么时候您的视图模型的一部分改变的呢?答案就是你需要为你的视图模型设置observable(监控),这是特殊的JavaScript对象,可将变更通知用户,并能自动检测依赖关系。

例如,改写前面的视图模型对象,如下所示:

var myViewModel={
   personName:ko.observable('Bob'),
   personAge:ko.observable(123)
};

当视图模型属性值发生变化时,会自动更新UI中的data-bind的绑定属性。同理UI中绑定属性发生变化时也会自动同步到视图模型中区。

读写监控属性

  • 要读取监控属性的当前值,只需调用视图模型属性的无参数方法。在这个例子中,myViewModel.personName()将返回‘Bob’,myViewModel.personAge()返回123.
  • 为了赋值一个新值到监控属性,只需要调用视图模型属性的有参数方法,将值作为参数传递。例如,调用myViewModel.personName('Mary')将更改名称值“Mary”。
  • 将值写入多个监控属性的模型对象,你可以使用链式语法。例如,myViewModel..personName('Mary').personAge(50)将更改名称值和年龄值为‘Mary’50

KO将可以监控监控属性,当你写data-bind="text:personName"时,text结合自身注册时得到通知personName的变化。当您更改名称值‘Mary’调用myViewModel.personName('Mary')时,text绑定会自动更新相关的DOM元素的文本内容。

声明监控

你通常需要手动设置订阅,所以初学者可以跳过这一节。

对于高级用户,如果你想注册自己的订阅通知的变化监控,你可以调用subscribe函数。例如:

myViewModel.personName.subscribe(function(newValue){
  alert("The person's new name is"+newValue)
});

该subscribe函数是KO内部函数。大多数时候,你不需要用这个,因为内置的绑定和模板系统管理监控已经够用了。该subscribe函数接受三个参数:callback是每当发生通知被调用的函数,target(可选)定义的值this的回调函数,event(可选,默认为“change”)是事件接受通知的名称。

您也可以终止订阅,可以调用dispose函数,例如:

var subscription=myViewModel.personName.subscribe(function(newValue){});
subscription.dispose();

如果你想在监控发生之前执行相关业务,可以使用beforeChange事件。例如:

myViewModel.personName.subscribe(function(oldValue){
alert("The person's previous name is"+oldValue);
},null,"beforeChange");

强行监控属性实时通知用户

当赋值一个包含原始值(一个数字,字符串,布尔值,或者null)监控属性,使用内置的notified,以确保一个观测检测属性的用户总是得到通知,即使该值是相同的。

myViewModel.personName.extend({notify:'always'});

延缓或抑制更改通知

通常情况下,监控属性值改变会立即通知其用户。但是,如果一个监控属性频繁跟新会带来高昂的数据传输代价,你可以通过限制或延迟变更通知获得更好的性能。这是通过使用rareLimit增量实现:

myViewModel.personName.extend({
    rateLimit:50
});


KnockoutJs (三)为Json数据添加监控属性(方法)

var cartList = (@Html.Raw(@ViewData["json"])); //接收后台json数据 for(var item in cartList) ...
  • Seal203
  • Seal203
  • 2016-08-21 11:02:27
  • 1176

【转】API接口监控那些事儿

1. 背景 在联盟广告业务中,广告投放接口的主要功能是给各大中小网站提供广告物料,该接口日pv量在百亿级别,部署在多个机房内。在测试该接口的过程中,可能会出现以下几种情况:     1.接...
  • muyimo
  • muyimo
  • 2017-05-10 17:32:39
  • 2834

Zookeeper实现集群和负载均衡---(5)Zabbix集成Zookeeper示例

上一章主要描述了zabbix集成Zookeeper的方案,本文主要描述zabbix集成Zookeeper示例。 zabbix集成Zookeeper模板描述...
  • oMaverick1
  • oMaverick1
  • 2016-03-01 10:06:25
  • 2074

zabbix系列(十)zabbix添加对zookeeper集群的监控

1.应用场景描述 在目前公司的业务中,有部分ESB架构用ZooKeeper作为协同服务的场景,做好ZooKeeper的监控很重要。 2.ZooKeeper监控要点 系统监控 内存使用量    Zo...
  • reblue520
  • reblue520
  • 2016-08-29 14:16:48
  • 3814

API Monitor(API监控工具)

概观 API Monitor是一个免费软件,可以让你监视和控制应用程序和服务,取得了API调用。 它是一个强大的工具,看到的应用程序和服务是如何工作的,或跟踪,你在自己的应用程序的问题。 产品特...
  • whatday
  • whatday
  • 2015-04-22 14:38:28
  • 19615

Knockout初体验--监控属性

Knockout是一款很优秀的JavaScript库(简称KO),它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你...
  • codingMonkeyKing
  • codingMonkeyKing
  • 2016-04-20 14:53:15
  • 808

金融类数据测试与监控实践

问题的提出 今天我要分享的是 如何测试和监控实时接口 金融类接口数据的因为业务性比较强, 就像股票,每天的价格都是实时的,除非特殊原因,例如停牌,价格才不会变动。 所以原来的的测试,基本都是要靠着...
  • zhengmengjia
  • zhengmengjia
  • 2017-08-09 08:44:05
  • 2971

串口数据捕获监控

  • 2012年06月08日 15:35
  • 796KB
  • 下载

为什么 API 监控对于任何业务来说都重要?

对于商务运算来说一个比较稳定的趋势在于对 API 日渐增长的依赖性,几乎每一个代码级交互过程都会调用 API 来收集数据或触发某些关键过程。没有 API ,你将无法与同伴进行文件交流,没有 API ,...
  • wangpeng198688
  • wangpeng198688
  • 2015-12-24 12:17:30
  • 537

Web API 接口监控

互联网产品,除了线上关键服务的实时监控十分重要,其实各服务的具体接口监控也不容忽视。如果线上某个接口挂了,最直观的表现是App/Web端上刷不出数、超时或直接抛错误。而这类接口异常的排查可能比服务异常...
  • andy_GoGo
  • andy_GoGo
  • 2015-12-14 18:16:40
  • 7256
收藏助手
不良信息举报
您举报文章:KnockoutJS 3.X API 第二章 数据监控(1)视图模型与监控
举报原因:
原因补充:

(最多只允许输入30个字)