【Knockout】二、监控属性Observables

MVVM和viewModel

Knockout是建立在以下三大核心功能之上的:

  1. 监控属性和依赖跟踪(Observables and dependency tracking)
  2. 声明式绑定(Declarative bindings)
  3. 模板(Templating)

首先让我们先来了解下MVVM模式,和viewModel的概念。

MVVM(model、view、viewModel)是一种创建用户界面的设计模式,他旨在将一个复杂的UI简单的分割为三个部分:

  • model : 在你的应用中用作存储数据;
  • view : 一个可见的、交互的UI来展现viewModel的状态;
  • viewModel : 用纯净的代码来展现ui的数据和操作,可是任意的javascript对象

首先创建一个viewModel,仅仅需要声明一个任意的javascript对象,例如:

var viewModel = {name : 'knockout';
};

然后为viewModel创建一个声明式的绑定view,例如:

<div id="myview" data-bind="text : name"></div>

最后激活knockout,例如

ko.applyBindings(viewModel,document.getElementById('myview'));

data-bind属性毕竟不是原生的html属性,即使它能够完美的工作,但是浏览器不认识它,你需要激活knockout以使它生效。

这样就把一个最简单的viewModel和view绑定到了一起,能够在view里显示viewModel的属性name了,但是,目前,view并不能在viewModel的数据改变时,自动更新view上显示的数据,viewModel也不能在view被改变时更新自己的属性数据!

Observables

knockout的一个重要功能observable(监控属性)就是能够自动自动探测相关的依赖与通知订阅者(automatic dependency detection and notification triggering),即在建立绑定关系的view和

viewModel之间能够在一方改变的时候更新另一方的值。

我们将viewModel稍作修改:

 var viewModel = {name : ko.observable("knockout")};

现在他就能监控到变化,view就能够自动更新了。

监控属性的读写操作:

    1.读取监控属性的值:

viewModel.name();

    2.写一个新值到监控属性中:

viewModel.name("new value");

Observable Arrays

如果你想探测并响应一个对象的变化,使用observables,但是,如果你想探测并响应一系列集合的变化,你应该使用observableArray。

当你需要重复的增加或者删除时需要显示或者隐藏一些UI的区域时,observableArray能够派上大用场。

var myObservableArray = ko.observableArray();    // Initially an empty array
myObservableArray.push('Some value');            // Adds the value and notifies observers

注:observableArray跟踪的是数组中的对象,而不是对象的状态。单纯的push一个对象到observableArray中,这个对象的属性并不是observable的,observableArray仅仅跟踪它所拥有的对象,并当有对象从数组中添加或删除时通知监听者。

也可以像这样初始化一个observableArray:

 

// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray([{ name: "Bungle", type: "Bear" },{ name: "George", type: "Hippo" },{ name: "Zippy", type: "Unknown" }
]);

 

Computed Observables (依赖监控属性)

如果你有一个observable的firstname和一个observable的lastname,你想显示fullname怎么办?computed observables派上用场了,它是一个依赖于其他一个或者多个observables的函数,并在任意一个依赖的observable更新时它能够自动更新。

例如:有这样一个viewModel:

function AppViewModel() {this.firstName = ko.observable('Bob');this.lastName = ko.observable('Smith');
}

你可以添加一个computed observable来得到fullname:

 

function AppViewModel() {// ... leave firstName and lastName unchanged ...this.fullName = ko.computed(function() {return this.firstName() + " " + this.lastName();}, this);
}

 

绑定UI元素:

The name is <span data-bind="text: fullName"></span>

当firstname或者lastname改变时fullname能够自动更新。

可以这样使用:

  • 监控属性items表示items的集合;
  • 监控属性selectedIndexes存储当前选中的items的index集合;
  • 依赖监控属性selectedItems表示当前选中的items集合;

改变items或者selectedIndexes都能够使依赖监控属性(selectedItems)更新,以达到更新相应的UI元素的目的。

 管理this : 

ko.computed的第二个参数决定了this的值当我们计算依赖监控属性的值的时候,如果不传它,将不能够引用到this.firstname()或者this.lastname().

你也可以这样做,更加方便:

 

function AppViewModel() {var self = this;self.firstName = ko.observable('Bob');self.lastName = ko.observable('Smith');self.fullName = ko.computed(function() {return self.firstName() + " " + self.lastName();});
}

 

self能够在funciton的闭包中被捕获到,在它任何的内嵌的function中任然是可用的。

判断一个属性是否为依赖监控属性(computed observable)

for (var prop in myObject) {if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {result[prop] = myObject[prop];}
}

另外,ko提供了一些函数能够操作监控属性和依赖监控属性:

  • ko.isObservable : 对于所有的observable,observable array,computed observable将返回true;
  • ko.isWritableObservable : 对于所有的observable,observable array,writable computed observable返回true;

 使用peek控制依赖关系:

正常情况下,ko的自动依赖跟踪能够完成你所期望的工作,但是,你也许希望控制哪个observable来更新或者不更新你的computed observable,peek()函数能够使你的observable或者computed不创建依赖关系。

例如:

 

ko.computed(function() {var params = {page: this.pageIndex(),selected: this.selectedItem.peek()};$.getJSON('/Some/Json/Service', params, this.currentPageData);
}, this);

 

在这个例子中,一个computed observable依赖其他两个observable使用ajax获取数据,当pageIndex改变的时候,computed observable就会更新,重新获取数据,但是computed observable会忽略掉selectedItem的改变,

因为它使用了peek()。在这种情况下,用户也许只希望使用selectedItem的值仅仅作为跟踪目的当一个新的数据集合下载完成以后。

构造computed observable

一个computed observable可以使用以下方式构造:

1.ko.computed( evaluator [, targetObject, options] )

    • evaluator : 一个用来计算当前依赖监控属性的值的函数。
    • targetObject : 可选,如果定义了,它将作为ko激活你的回调函数时候的this值。
    • options : 可选,备用。

2.ko.computed(options),options包含以下属性:

    • read : 必须的。用来计算当前依赖监控属性的值的函数。
    • write : 可选的。使依赖监控属性writable,这个函数接收一个value参数以用来write到computed observable中。
    • owner : 可选的。如果定义了,它将作为回调函数的this值。
    • pure : 可选的。如果为true,这个computed observable将被设置为pureComputed observable。
    • deferEvaluation : 可选的。不常用
    • disposeWhen : 可选的。不常用
    • disposeWhenNodeIsRemoved : 可选的。不常用。

computed observable的使用

  • dispose() : 手动管理依赖监控属性,清楚所有依赖的订阅关系,这个函数非常有用,当你想停止computed observable的更新或者清除内存的时候
  • extend(exteners) : 扩展方法。
  • getDependenciesCount() : 返回当前computed observable的依赖数量。
  • getSubScriptionsCount() : 
  • isActive() : 返回computed observable是否会更新在将来的某个时候,一个没有任何依赖的computed observable是不会被激活的
  • peek() : 返回computed observable中没有创建依赖关系的值。
  • subscribe(callback,[callbackTarget,event]) : 注册一个手动的订阅来接收computed observable改变的通知。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/439279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++学习】对私有构造析构函数的思考:new一个类对象vs直接创建类对象

前置知识&#xff1a; new的类对象需要手动delete。且使用堆空间。且只能用指针接收。 直接创建的类对象创建在栈中&#xff08;或说堆栈&#xff09;。不需要手动delete&#xff0c;随着生存周期的结束&#xff08;如所在的函数return了&#xff09;而释放&#xff0c;和堆栈…

applyBinding Observables

一般的数据绑定有三种:One-Time&#xff0c;One-Way&#xff0c;Two-way。 One-Time绑定模式的意思即为从viewModel绑定至UI这一层只进行一次绑定&#xff0c;程序不会继续追踪数据的在两者中任何一方的变化&#xff0c;这种绑定方式很使用于报表数据&#xff0c;数据仅仅会加…

【git学习】统计git项目某user的代码量

查看自己的代码量&#xff1a;&#xff08;直接awk编程&#xff09; git log --author"username" --prettytformat: --numstat | awk { add $1; subs $2; loc $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, …

一步步编写操作系统 79 在c代码中内联汇编

基本内联汇编是最简单的内联形式&#xff0c;其格式为&#xff1a; asm [volatile] (“assembly code”) 各关键字之间可以用空格或制表符分隔也可以紧凑挨在一起不分隔&#xff0c;各部分意义如下&#xff1a; 关键字asm用于声明内联汇编表达式&#xff0c;这是内联汇编固定…

LeetCode 237. 删除链表中的节点(思维)

请编写一个函数&#xff0c;用于 删除单链表中某个特定节点 。在设计函数时需要注意&#xff0c;你无法访问链表的头节点 head &#xff0c;只能直接访问 要被删除的节点 。 题目数据保证需要删除的节点 不是末尾节点 。 https://leetcode-cn.com/problems/delete-node-in-a-…

一步步编写操作系统80 扩展内联汇编1

由于基本内联汇编功能太薄弱了&#xff0c;所以才对它进行了扩展以使其功能强大。不过&#xff0c;易用性往往与功能强弱是成正比的&#xff0c;如您所料&#xff0c;扩展内联汇编确实有点难&#xff0c;但在求知欲的驱使下&#xff0c;就让咱们痛并快乐着吧。 gcc本身是个c编…

LeetCode 397. 整数替换

题目大意&#xff1a; 给定一个正整数 n &#xff0c;你可以做如下操作&#xff1a; 如果 n 是偶数&#xff0c;则用 n / 2替换 n 。 如果 n 是奇数&#xff0c;则可以用 n 1或n - 1替换 n 。 n 变为 1 所需的最小替换次数是多少&#xff1f; 链接&#xff1a;https://leet…

一步步编写操作系统81 att内嵌汇编语法

内联汇编的格式也变得让人生畏了&#xff0c;感觉既不像C语言&#xff0c;也不像汇编语言&#xff0c;似乎是一种中间产物&#xff0c;不信您看&#xff1a; asm [volatile] (“assembly code” : output : input : clobber/modify) 和前面的基本内联汇编相比&#xff0c;扩展…

LeetCode 375. 猜数字大小 II

题目大意&#xff1a; https://leetcode-cn.com/problems/guess-number-higher-or-lower-ii 我们正在玩一个猜数游戏&#xff0c;游戏规则如下&#xff1a; 我从 1 到 n 之间选择一个数字。 你来猜我选了哪个数字。 如果你猜到正确的数字&#xff0c;就会 赢得游戏 。 如果你…

【转】2.3SharePoint服务器端对象模型 之 访问网站和列表数据(Part 3)

&#xff08;三&#xff09;视图 与传统意义上的数据视图类似&#xff0c;SharePoint中的列表视图指定了列表中数据的筛选条件、排序条件、分组条件、显示栏/字段、显示条目数、显示样式等内容。在SharePoint中&#xff0c;使用SPView表示列表视图&#xff0c;使用SPViewColle…

LeetCode 598. 范围求和 II

https://leetcode-cn.com/problems/range-addition-ii 题目大意 给定一个初始元素全部为 0&#xff0c;大小为 m*n 的矩阵 M 以及在 M 上的一系列更新操作。 操作用二维数组表示&#xff0c;其中的每个操作用一个含有两个正整数 a 和 b 的数组表示&#xff0c;含义是将所有符…

【转】2.4SharePoint服务器端对象模型 之 访问网站和列表数据(Part 4)

&#xff08;四&#xff09;栏/字段 SharePoint中的字段&#xff08;中文版中叫做“栏”&#xff09;与传统的数据栏类似&#xff0c;也有不同类型的区别&#xff0c;不过SharePoint中内置的栏类型除了按照数据类型&#xff08;如数字、日期和时间等&#xff09;进行区分之外&…

【转】2.5SharePoint服务器端对象模型 之 访问网站和列表数据(Part 5)

&#xff08;五&#xff09;列表条目&#xff08;SPListItem&#xff09; SharePoint中数据的存储基本上都是通过列表条目来完成&#xff08;文档库中的文档也是一种特殊的列表条目&#xff09;&#xff0c;因此在SharePoint应用开发中&#xff0c;最终是要和列表条目打交道的…

【转】3.1SharePoint服务器端对象模型 之 访问文件和文件夹(Part 1)

本节中所阐述的内容&#xff0c;主要适用于SharePoint文档库中的文件和文件夹&#xff0c;以及列表中的文件夹。系统中的其他文件&#xff08;如_layouts中的文件、配置文件、程序文件等&#xff09;不在本章节的讨论范围之内。 &#xff08;一&#xff09;概述 SharePoint的文…

电影与爆米花(模拟)

题目大意&#xff1a; n个人是朋友&#xff0c;他们坐在一排去看电影&#xff0c;相邻的最多三个人可以吃同一桶爆米花。每个人都想迟到爆米花&#xff0c;问最少需要几桶爆米花&#xff1f; 输入&#xff1a;一个数组&#xff0c;代表这n个人每个人选择的座位号。 输出&…

【转】3.2SharePoint服务器端对象模型 之 访问文件和文件夹(Part 2)

4、添加文件夹 文件夹的创建方法在文档库和普通列表中稍有不同。 在文档库中&#xff0c;与一般的集合操作相同&#xff0c;直接使用SPFolderCollection的Add(string name)方法即可添加文件夹&#xff0c;例如下面的程序在文档库的根目录中添加一个名为“技术文档”的子文件夹…

【分治】01串

在第一行我们写上一个0。接下来的每一行&#xff0c;将前一行中的0替换为01&#xff0c;1替换为10。 给定行数N和序数K&#xff0c;返回第N行中第K个字符。&#xff08;K从1开始&#xff09; 输入格式: 输入在一行中给出2个整数N和K。 N的范围[1,30] K的范围[1,2(N−1)] 输出…

【转】3.3SharePoint服务器端对象模型 之 访问文件和文件夹(Part 3)

&#xff08;三&#xff09;遍历 文件系统的遍历是指按照文件夹的层级结构遍历文档库、列表的文件夹和列表条目。遍历主要有三种方式&#xff1a;&#xff08;1&#xff09;直接使用文件系统对象模型进行遍历&#xff1b;&#xff08;2&#xff09;使用SPDocumentLibrary进行遍…

【思维构造】跳跃游戏

题干&#xff1a; 有一种跳跃游戏&#xff1a;假设初始位置在数轴的原点处&#xff0c;每一次可以选择两种操作&#xff1a; 向前k步或向后一步&#xff08;k为当前的移动次数&#xff0c;即第k次跳跃k步&#xff09;。给定一个终点D&#xff08;D>0&#xff09;&#xff0…

【LeetCode-581】最短无序连续子数组

给你一个整数数组 nums &#xff0c;你需要找出一个 连续子数组 &#xff0c;如果对这个子数组进行升序排序&#xff0c;那么整个数组都会变为升序排序。 请你找出符合题意的 最短 子数组&#xff0c;并输出它的长度。 示例 1&#xff1a; 输入&#xff1a;nums [2,6,4,8,10…