knockout的依赖属性dependentObservable和observable的监控的使用
1、Knockout是在下面三个核心功能是建立起来的:
监控属性(Observables)和依赖跟踪(Dependency tracking)
声明式绑定(Declarative bindings)
模板(Templating)
2、MVVM的含义:
MVVM(Model-View-View Model):是一种创建用户界面的设计模式。
model: 你程序里存储的数据。这个数据包括对象和业务操作,使用KO的时候,
通常说是向服务器调用Ajax读写这个存储的模型数据。
View: 一个可见的,交互式的,表示view model状态的UI。
View Model: 从view model显示数据,发送命令到view model,
任何view model状态改变的时候更新。
1、knockout的使用
1)创建一个View Model,声明为javascript object (js对象)
var myViewModel = {
userName: zhangsan;
password:123456
};
2)位view Model创建一个声明式绑定的View
用户名称:<span id="userName" data-bind="text:userName"></span>
用户密码:<span data-bind="text:password"></span>
3)浏览器不识别data-bind属性,所以要激活knockout
ko.applyBindings(myViewModel);
2、监控属性observable的使用
在原有的View Model添加observable,实现监控
var myViewModel = {
userName: ko.observable("zhangsan"),
password:ko.observable("123456")
};
监控属性的读写
myViewModel.userName() //读操作,输出zhangsan
myViewModel.password() //输出123456
myViewModel.userName("wangwu") //写操作或赋值,修改wangwu
myViewModel.userName("linlin").password("lin123") //赋值
使用的例子如下:
运行后的效果如下:
knockout的依赖属性dependentObservable和observable的监控的使用的更多相关文章
- knockout的依赖属性dependentObservable的参数 和Value转换器
可写的依赖监控属性ko.dependentObservable的参数 read: 必选,一个用来执行取得依赖监控属性当前值的函数write: 可选,如果声明将使你的依赖属性可写,别的代码如果这个 ...
- knockout源码分析之computed(依赖属性)
一.序列图 二.主要代码文件 1.dependentObservable.js:主要包含ko.computed相关方法的处理2.dependencyDetection.js:主要包含依赖的监控上下文对 ...
- Knockout.js(三):计算属性(Computed Observable)
在Knockout2.0之前,计算属性被称之为依赖属性,在2.0版本中,ko.dependentObservable重命名为ko.computed,因为它在读.解释和类型上更简单.在实际使用中,ko. ...
- 3.Knockout.Js(属性绑定)
前言 让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值. 简单的绑定 首先还是先定义一个ViewModel var AppViewModel = { shou ...
- Knockout 新版应用开发教程之Observable与computed
KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...
- Knockout 新版应用开发教程之Observable Arrays
假如你想到侦测和相应一个对象的改变,假如你想要侦测和响应一一组合集的改变,就要用observableArray 在许多场景都是很有用的,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行 ...
- Knockout.Js官网学习(数组observable)
前言 如果你要探测和响应一个对象的变化,你应该用observables. 如果你需要探测和响应一个集合对象的变化,你应该用observableArray . 在很多场景下,它都非常有用,比如你要在UI ...
- Knockout v3.4.0 中文版教程-8-计算监控-纯计算属性
4.纯计算属性 纯计算监控在KO 3.2.0中开始引入,比大多数应用程序使计算监控有更大的性能提升和内存优化.这是因为在自身没有订阅的时候不会保持订阅状态.特性如下 阻止内存泄露 - 避免在应用程序里 ...
- 2000条你应知的WPF小姿势 基础篇<57-62 依赖属性进阶>
在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...
随机推荐
- 支付宝支付后回调通知中responseTxt=true isSign=False可能的问题
在做支付宝的二维码扫码支付功能,生成二维码成功,扫描后也能付款,付款后也能回调通知到我的页面,但是验证签名的时候出错,找了好久终于找到是什么原因: 引用 1. 用的RSA签名验证,默认密钥纯字符,并不 ...
- MySQL、PostgreSQL、Ingres r3、MaxDB等开源数据库的详细比较
1.MySQL 5 作为当今最流行的开放源码数据库之一,MySQL数据库为用户提供了一个相对简单的 解决方案,适用于广泛的应用程序部署,能够降低用户的TCO.MySQL是一个多线程.结构化查询语言(S ...
- SQL语句调优 - 索引上的数据检索方法
如果一张表上没有聚集索引,数据将会随机的顺序存放在表里.以dbo.SalesOrderDetail_TEST为例子.它的上面没有聚集索引,只有一个在SalesOrderID上的非聚集索引.所以表格的每 ...
- winform C#获得Mac地址,IP地址,子网掩码,默认网关
1.添加程序集 2.引入命名空间 using System.Management; 3.方法 ManagementClass mc = new ManagementClass("Win32_ ...
- 在spring,mybatis整合配置中走的弯路(1)
在接触一个新东西,总免不了走一些弯路,也正是在这些弯路中,我们不断的成长. 从git上把之前写的代码扒下来,看看我在当初使用spring与mybatis中所走的弯路,路过的君子也可引以为戒. < ...
- 我的web框架
我的web框架 ========================================================== 前端:css(bootstrap,自己的代码片段),js(jque ...
- DS1337 时钟芯片在 C8051F 上的实现
一.DS1337介绍 DS1337串行实时时钟芯片是一种低功耗.全部采用BCD码的时钟日历芯片,它带有两个可编程的定时闹钟和一个可编程的方波输出.其地址和数据可通过I2C总线串行传输,能提供秒.分.时 ...
- 超微 X9DRL-iF 服务器主板简介 BIOS相关图解
超微 X9DRL-iF 服务器主板简介 BIOS相关图解 板载串口阵列相关简介 网烁信息805 发布时间:2012-6-15 21:10:09 浏览数:2745 随着Intel E5至强的 ...
- 2013年Linux周刊读者投票出炉 Ubuntu、Android榜上有名
摘要:一年一度的Linux周刊读者投票结果已经登于2013第12期.这是Linux爱好者们自己的“奥斯卡”: Linux周刊的小编们列出一系列Linux相关的“最佳项目”进行面向读者的投票.竞选项目包 ...
- Google Chrome 扩展程序开发
根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一 ...