一般的数据绑定有三种:One-Time,One-Way,Two-way。

One-Time绑定模式的意思即为从viewModel绑定至UI这一层只进行一次绑定,程序不会继续追踪数据的在两者中任何一方的变化,这种绑定方式很使用于报表数据,数据仅仅会加载一次。

One-Way绑定模式即为单向绑定,即object-UI的绑定,只有当viewModel中数据发生了变化,UI中的数据也将会随之发生变化,反之不然。

Two-Way绑定模式为双向绑定,无论数据在Object或者是UI中发生变化,应用程序将会更新另一方,这是最为灵活的绑定方式,同时代价也是最大的。数据绑定只是作为元素的自定义属性写上标签内,并不能决定它是何种绑定。

如果值是通过ko.observable定义的说明是双向绑定,否则为One-Time绑定,在knockout不存在单向绑定。

applyBindings

隐藏代码// Knockout调用applyBindings激活myViewModel(即把myViewModel和View中的声明式绑定data-bind接洽关系起来)
ko.applyBindings(myViewModel);
// 限制只在指定对象someElementId和后代节点中进行激活操纵。
ko.applyBindings(myViewModel, document.getElementById(""someElementId""));
personName: ko.observable(""Bob""),
// 静态绑定
The name is <span data-bind="text: personName"></span> 

Observables

并不是所有的浏览器都支撑JavaScript的getters和setters办法(IE),是以从兼容性推敲,ko.observable是function。

读取observable属性:myViewModel.personName()

设置observable属性:myViewModel.personName(""Mary"")

同时设置多个observable属性:myViewModel.personName(""Mary"").personAge(50) 链式语法

隐藏代码// 动态绑定(主动订阅,作废订阅)
var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });
// ...then later...
subscription.dispose(); // I no longer want notifications// Computed Observablesthis.fullName = ko.computed(function() {return this.firstName() + " " + this.lastName();}, this);var myObservableArray = ko.observableArray();    // Initially an empty array
myObservableArray.push(""Some value"");            // Adds the value and notifies observers// 初始化绑定命组
// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray([{ name: "Bungle", type: "Bear" },{ name: "George", type: "Hippo" },{ name: "Zippy", type: "Unknown" }
]);// 自定义排序
myObservableArray.sort(function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })// 可写的依附属性 --- 数字主动格局化显示,保存值时移除无关逗号
function MyViewModel() {this.price = ko.observable(25.99);this.formattedPrice = ko.computed({read: function () {return ""¥"" + this.price().toFixed(2);},write: function (value) {// Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observablevalue = parseFloat(value.replace(/[^.d]/g, ""));this.price(isNaN(value) ? 0 : value); // Write to underlying storage},owner: this});
}ko.applyBindings(new MyViewModel());

Writeable computed observables可写的依附属性(FirstName 和 FullName彼此换算,数字主动格局化显示)

ko.dependentObservable(Knockout 2.0中新增长的办法,和ko.computed等价,然则加倍便利懂得应用)

Observable Arrays

observableArray :跟踪的是数组中的对象,而不是对象的状况。即observableArray 仅跟踪它拥有的对象,

并且在对象被添加或者删除的时辰,通知listeners

。要监控对象的属性变更,须要编写自力的代码。 因为observableArray()办法放回的是一个数组,是以从技巧上来说,任何Javascript关于数组操纵的原生办法都能直接应用。

然则基于下述来由,凡是推荐应用KO中的等价办法:

1,KO中的办法支撑所有主流浏览器(比如,Javascript原生办法indexOf在<=IE8时不正常,而KO的indexOf 能正常工作)

2,dependency tracking

3,语法加倍简洁:调用KO中的办法应用myObservableArray.push(...),调用原生Javascript中的办法应用myObservableArray().push(...)

具体每个办法参考下面链接中的文档

observableArray 排序:默认对字符串用字母排序,对数字用数值排序。可以自定义排序办法:参考代码块中的代码

applyBinding Observables相关推荐

  1. Knockout.js 学习 (六)-- 监控属性数组 applyBinding Observables

    如果你想发现并响应一个对象的改变,就应该用监控属性(observables).如果你想发现并响应一个集合的变化,就该用监控属性数组(observableArray).监控属性数组在 显示或编辑多个值 ...

  2. Knockout学习教程

    Knockout介绍 Knockout.js是什么?Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良 ...

  3. Knockout.js学习笔记----介绍

    1.Knockout介绍 Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界 ...

  4. Observables简介以及它们与Promise有何不同

    'Observables', 'Observables', 'Observables'...Yes! Today, we will talk about this often discussed wo ...

  5. redux 局部刷新_如何使用Redux Observables和刷新令牌API获取新的访问令牌

    redux 局部刷新 by Sachin Kumar 由Sachin Kumar 如何使用Redux Observables和刷新令牌API获取新的访问令牌 (How to get a new acc ...

  6. RxJS - Observables, observers 和 operators 简介

    RxJS 是响应式编程 (reactive programming) 强大的工具,今天我们将深入介绍 Observables 和 Observers 的内容,以及介绍如何创建自己的操作符 (opera ...

  7. 利用Angular2的Observables实现交互控制

    在Angular1.x中,我们使用Promise来处理各种异步.但是在angular2中,使用的是Reactive Extensions (Rx)的Observable.对于Promise和Obser ...

  8. 【Knockout】二、监控属性Observables

    MVVM和viewModel Knockout是建立在以下三大核心功能之上的: 监控属性和依赖跟踪(Observables and dependency tracking) 声明式绑定(Declara ...

  9. 2.Knockout.Js(监控属性Observables)

    前言 1.创建一个ViewModel <script type="text/javascript">//1.创建一个ViewModelvar myViewModel = ...

最新文章

  1. 关于汉诺塔非递归算法的一点思考
  2. javascript基础拾遗——词法作用域
  3. PostgreSQL 10.1 手册_部分 III. 服务器管理_第 32 章 回归测试_32.5. 测试覆盖检查
  4. 移动APP接口安全性设计
  5. LeetCode 267. 回文排列 II(回溯)
  6. 【前端知识学习】HTML5 学习笔记
  7. 高性能服务器架构思路【不仅是思路】
  8. java websocket
  9. 学习linux心得,linux学习心得范文
  10. 3GPP 5G协议下载地址
  11. Oracle--同义词详解
  12. 图像分割阈值选取技术综述
  13. html touch时没有阴影,4399touch怎么玩 Touch游戏常见问题汇总
  14. php 睡眠,win10睡眠是什么意思
  15. ceph-deploy源码分析(三)——mon模块 转
  16. 使用while循环语句与自增运算符循环遍历数组 (Java经典编程案例)
  17. 08简单推导:手机尾号评分
  18. 【论文阅读|深读】SDNE:Structural Deep Network Embedding
  19. VC LP的使用方法
  20. 微软旗下GitHub宣布裁员10%;谷歌高管警告:AI聊天机器人会产生错觉;华为称在ChatGPT领域早有布局丨每日大事件...

热门文章

  1. Python全栈开发——面向对象的三大特性(继承 多态 封装)
  2. Linux中通过Socket文件描述符寻找连接状态介绍
  3. 有关软件工程的问题的分析和讨论及课后的作业3
  4. 转载——开阔自己的视野,勇敢的接触新知识
  5. Eclipse与github整合完整版
  6. 图谱问答-句子向量模型部署项目总结(未完)
  7. HDU-4793 Collision 计算几何 解方程
  8. Java学习笔记2——常用类
  9. tableau地图城市数据_举个栗子!Tableau 技巧(156):在地图分析中创建缓冲区
  10. 1-1圆柱体的表面积(算法竞赛入门经典)