applyBinding Observables
一般的数据绑定有三种: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相关推荐
- Knockout.js 学习 (六)-- 监控属性数组 applyBinding Observables
如果你想发现并响应一个对象的改变,就应该用监控属性(observables).如果你想发现并响应一个集合的变化,就该用监控属性数组(observableArray).监控属性数组在 显示或编辑多个值 ...
- Knockout学习教程
Knockout介绍 Knockout.js是什么?Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良 ...
- Knockout.js学习笔记----介绍
1.Knockout介绍 Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界 ...
- Observables简介以及它们与Promise有何不同
'Observables', 'Observables', 'Observables'...Yes! Today, we will talk about this often discussed wo ...
- redux 局部刷新_如何使用Redux Observables和刷新令牌API获取新的访问令牌
redux 局部刷新 by Sachin Kumar 由Sachin Kumar 如何使用Redux Observables和刷新令牌API获取新的访问令牌 (How to get a new acc ...
- RxJS - Observables, observers 和 operators 简介
RxJS 是响应式编程 (reactive programming) 强大的工具,今天我们将深入介绍 Observables 和 Observers 的内容,以及介绍如何创建自己的操作符 (opera ...
- 利用Angular2的Observables实现交互控制
在Angular1.x中,我们使用Promise来处理各种异步.但是在angular2中,使用的是Reactive Extensions (Rx)的Observable.对于Promise和Obser ...
- 【Knockout】二、监控属性Observables
MVVM和viewModel Knockout是建立在以下三大核心功能之上的: 监控属性和依赖跟踪(Observables and dependency tracking) 声明式绑定(Declara ...
- 2.Knockout.Js(监控属性Observables)
前言 1.创建一个ViewModel <script type="text/javascript">//1.创建一个ViewModelvar myViewModel = ...
最新文章
- 关于汉诺塔非递归算法的一点思考
- javascript基础拾遗——词法作用域
- PostgreSQL 10.1 手册_部分 III. 服务器管理_第 32 章 回归测试_32.5. 测试覆盖检查
- 移动APP接口安全性设计
- LeetCode 267. 回文排列 II(回溯)
- 【前端知识学习】HTML5 学习笔记
- 高性能服务器架构思路【不仅是思路】
- java websocket
- 学习linux心得,linux学习心得范文
- 3GPP 5G协议下载地址
- Oracle--同义词详解
- 图像分割阈值选取技术综述
- html touch时没有阴影,4399touch怎么玩 Touch游戏常见问题汇总
- php 睡眠,win10睡眠是什么意思
- ceph-deploy源码分析(三)——mon模块 转
- 使用while循环语句与自增运算符循环遍历数组 (Java经典编程案例)
- 08简单推导:手机尾号评分
- 【论文阅读|深读】SDNE:Structural Deep Network Embedding
- VC LP的使用方法
- 微软旗下GitHub宣布裁员10%;谷歌高管警告:AI聊天机器人会产生错觉;华为称在ChatGPT领域早有布局丨每日大事件...