KO.js学习笔记(一)

时间:2023-01-01 22:10:06

1.官方网站:knockoutjs.com

2.要dom树加载完毕才能绑定数据

3.ui能实时更新,使用了ko的一个自定义属性:data-bind

4.可以对viewmodel中的属性添加subscibe订阅,可指定注册的事件

也可以用dispose方法取消

5.Model-View-View Model (MVVM) 是一种创建用户界面的设计模式。 描述的是如何将复杂的UI用户界面分成3个部分:

  • model: 你程序里存储的数据。这个数据包括对象和业务操作(例如:银子账户可以完成转账功能),并且独立于任何UI。使用KO的时候,通常说是向服务器调用Ajax读写这个存储的模型数据。
  • view model: 在UI上,纯code描述的数据以及操作。例如,如果你实现列表编辑,你的view model应该是一个包含列表项items的对象和暴露的add/remove列表项(item)的操作方法。

注意这不是UI本身:它不包含任何按钮的概念或者显示风格。它也不是持续数据模型 – 包含用户正在使用的未保存数据。使用KO的时候,你的view models是不包含任何HTML知识的纯JavaScript 对象。保持view model抽象可以保持简单,以便你能管理更复杂的行为。

  • view: 一个可见的,交互式的,表示view model状态的UI。从view model显示数据,发送命令到view model(例如:当用户click按钮的时候),任何view model状态改变的时候更新。

使用KO的时候,你的view就是你带有绑定信息的HTML文档,这些声明式的绑定管理到你的view model上。或者你可以使用模板从你的view model获取数据生成HTML。

6.添加依赖监控属性(dependentobservarale或computed)的时候要指定作用域,而且可以为它们指定读写方法

7.依赖跟踪的原理:

  • 当你声明一个依赖监控属性的时候,KO会立即调用执行函数并且获取初始化值。
  • 当你的执行函数运行的时候,KO会把所有需要依赖的依赖属性(或者监控依赖属性)都记录到一个Log列表里。
  • 执行函数结束以后,KO会向所有Log里需要依赖到的对象进行订阅。订阅的callback函数是重新运行你的执行函数。然后回头重新执行上面的第一步操作(并且注销不再使用的订阅)。
  • 最后KO会通知上游所有订阅它的订阅者,告诉它们我已经设置了新值。

KO.js学习笔记(一)的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟:《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

随机推荐

  1. 建造者模式组装mybatis参数Example()

    参考:github,   https://github.com/liuxiaochen0625/MyBatis-Spring-Boot-master.git 从controller组装tk.mybat ...

  2. hdu 5384 Danganronpa

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5384 思路:没学自动机时以为是道KMP然后就tle了好几把,AC自动机模板题 #include<cs ...

  3. 周末苦逼码代码,为css3的强大所颤抖了

    周末小哥我看完了几个星期没追的行尸走肉和生活大爆炸(感谢大A站!),感觉生活真的好空虚,没想到我现在居然会对游戏失去了兴趣!!!代码的魔力真的是无法用语言形容...(我真假...)百无聊赖,在电脑上装 ...

  4. shell程序设计(转)

    1.shell脚本的基本概念: (1)Shell执行的是称为shell程序,这些程序通常被称为脚本. (2)Shell是一个用户和系统间接口的程序,它允许用户向操作系统输入需要执行的命令. (3)sh ...

  5. hdu4738(割桥)

    找人去炸边,炸完之后分成两个连通块(炸割桥) 每条边上有w个守卫,派去炸桥的人不能比守卫少 所以, 如果原本不连通,那么输出0 如果没有桥,输出-1 如果有桥没有守卫,那么是输出1,而不是0(tric ...

  6. 【转】虚拟机下安装小红帽Linux9&period;0图解

    http://blog.163.com/ly676830315@126/blog/static/10173372220119148583539/

  7. vue环境搭建过程中,遇到的坑爹的问题

    1,在配置package.json下载node依赖包时,执行$cnpm install过程中,这个过程是比较漫长的,尤其的这种core i5配置的电脑,简直有点卡的人怀疑人生,后来动了下有消息输出,我 ...

  8. mysql 数据类型别名参考

    To facilitate the use of code written for SQL implementations from other vendors, MySQL maps data ty ...

  9. C&num;数据结构学习

    Collection类学习 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  10. python基本数据结构栈stack和队列queue

    1,栈,后进先出,多用于反转 Python里面实现栈,就是把list包装成一个类,再添加一些方法作为栈的基本操作. 栈的实现: class Stack(object): #初始化栈为空列表 def _ ...