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的监控的使用的更多相关文章

  1. knockout的依赖属性dependentObservable的参数 和Value转换器

    可写的依赖监控属性ko.dependentObservable的参数 read:   必选,一个用来执行取得依赖监控属性当前值的函数write:  可选,如果声明将使你的依赖属性可写,别的代码如果这个 ...

  2. knockout源码分析之computed(依赖属性)

    一.序列图 二.主要代码文件 1.dependentObservable.js:主要包含ko.computed相关方法的处理2.dependencyDetection.js:主要包含依赖的监控上下文对 ...

  3. Knockout.js(三):计算属性(Computed Observable)

    在Knockout2.0之前,计算属性被称之为依赖属性,在2.0版本中,ko.dependentObservable重命名为ko.computed,因为它在读.解释和类型上更简单.在实际使用中,ko. ...

  4. 3.Knockout.Js(属性绑定)

    前言 让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值. 简单的绑定 首先还是先定义一个ViewModel var AppViewModel = { shou ...

  5. Knockout 新版应用开发教程之Observable与computed

    KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...

  6. Knockout 新版应用开发教程之Observable Arrays

    假如你想到侦测和相应一个对象的改变,假如你想要侦测和响应一一组合集的改变,就要用observableArray 在许多场景都是很有用的,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行 ...

  7. Knockout.Js官网学习(数组observable)

    前言 如果你要探测和响应一个对象的变化,你应该用observables. 如果你需要探测和响应一个集合对象的变化,你应该用observableArray . 在很多场景下,它都非常有用,比如你要在UI ...

  8. Knockout v3.4.0 中文版教程-8-计算监控-纯计算属性

    4.纯计算属性 纯计算监控在KO 3.2.0中开始引入,比大多数应用程序使计算监控有更大的性能提升和内存优化.这是因为在自身没有订阅的时候不会保持订阅状态.特性如下 阻止内存泄露 - 避免在应用程序里 ...

  9. 2000条你应知的WPF小姿势 基础篇<57-62 依赖属性进阶>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...

随机推荐

  1. IPv6 app适配

    参考资料: https://developer.apple.com/library/mac/documentation/NetworkingInternetWeb/Conceptual/Network ...

  2. Android Screen Orientation Change (Screen Rotation) Example

    原文见: http://techblogon.com/android-screen-orientation-change-rotation-example/#

  3. iOS10 CoreData新特性

    原文地址:What's New in Core Data in macOS 10.12, iOS 10.0, tvOS 10.0, and watchOS 3.0 翻译者:肖品,原创文章转载请著名出处 ...

  4. 高性能优化Web前端

    高性能HTML 一.避免使用iframe iframe也叫内联frame,可将一个HTML文档嵌入另一个HTML文档中. iframe的好处是,嵌入的文档独立于父文档,通常也借此使浏览器模拟多线程.缺 ...

  5. 对已经add的文件不在跟踪

    记录每次更新到仓库 现在我们手上已经有了一个真实项目的 Git 仓库,并从这个仓库中取出了所有文件的工作拷贝.接下来,对这些文件作些修改,在完成了一个阶段的目标之后,提交本次更新到仓库. 请记住,工作 ...

  6. 内容营销三大实用法则(内含干货)-同样可运用在EDM数据营销中

    内容为王的时代,注重内容的发展才能屹立于互联网的浪潮之中.一个优秀内容在搜寻引擎优化.用户互动,促进销售等方面都扮演重要的角色,博主在这方面深有体会,但是很多人往往走向事情的反面,不注重实际的内容,而 ...

  7. 十五、EnterpriseFrameWork框架核心类库之系统启动入口与初始化

    本章内容是讲三种开发模式,web模式.Winform模式和Wcf模式的系统启动入口有什么区别,以及启动后系统初始化的内容:为什么要把这些单独提出来讲一章,因为我觉得本章非常重要,我们都知道程序中的ma ...

  8. 十四、EnterpriseFrameWork框架核心类库之简易ORM

    在写本章前先去网上找了一下关于ORM的相关资料,以为本章做准备,发现很多东西今天才了解,所以在这里也对ORM做不了太深入的分析,但还是浅谈一下EFW框架中的设计的简易ORM:文中有一点讲得很有道理,D ...

  9. Safari下默认10位数字为电话号码,点击拨号

    <meta content="telephone=no" name="format-detection"/>

  10. Cannot find SS.INI file for user *** 解决方法

    昨天还用的好好的VSS今天早上一来就提示: Cannot find SS.INI file for user *** 度娘了一下,好像都是说的: 1,vss\users\***\  下无文件SS.IN ...