认识Knockout及如何使用Knockout绑定上下文

前端之家收集整理的这篇文章主要介绍了认识Knockout及如何使用Knockout绑定上下文前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Knockout介绍

Knockout简称ko,是一个轻量级的javascript类库,采用MVVM设计模式(即Model、view、viewmodel),简单优雅的实现了双向绑定,实时更新,帮助您使用干净的数据模型来创建丰富的、响应式的用户界面。

Knockout有三大核心特性:

1.优雅的依赖跟踪(Elegant dependency tracking):任何时候数据模型的变化都会自动更新相应的UI部分;

2.声明式绑定(Declarative bindings) : 简单的将UI和你的数据模型关联起来,你就可以创建复杂的动态UI;

3.高度可扩展性(Trivially extensible) : 只需几行代码实现一个自定义的行为来作为声明式绑定;

其他优点:

1.纯净的javascript代码

2.可以随时添加到你现有的web应用中;

3.轻量级,GZIP后只有13K;

4.能够工作于几乎所有主流浏览器((IE 6+,Firefox 2+,Chrome,Safari,Edge,others);

ko采用的是MVVM设计模式,即model view viewmodel。

简单的例子

items

就是这么简单,你不必写代码来更新text内容,它会在数组长度改变时自动更新,与此类似,如果我们想利用数组长度控制按钮的可用性仅仅需要:

下面接着给大家介绍使用Knockout绑定上下文

Binding context

binding context是一个保存数据的对象,你可以在你的绑定中引用它。当应用绑定的时候,knockout自动创建和管理binding context的继承关系。这种层次结构的根引用你指定的viewmodel参数(ko.applyBindings(viewmodel))。

然后每次使用一个控制流如with或者foreach 来创建一个子节点binding context引用嵌套的viewmodel data。

$parent

is the manager of

$parents

这是一个数组,代表了所有的父节点view models

$parent[0] : 代表父节点;

$parent[1] : 代表祖父节点;

$parent[1] : 代表曾祖父节点;

.....以此类推

$root

它是root context的根节点视图模型对象,一般是通过ko.applyBindings指定的,相当于$parents[$parents.length - 1]。

$component

如果你在一个特定的组件模板的上下文中,$component指定的是那个component,它的指定组件相当于$root,在嵌套的组件情况下,它代表了最邻近的一个组件。

$data

它代表了当前上下文中的viewmodel对象,$data和$root是相当的。在嵌套的binding context中,这个参数将设置到当前的数据项。

$data是非常有用的,例如,当你想引用viewmodel本身而不是viewmodel的属性的时候。

The value is $index(仅在foreach binding中可用)

它是一个在foreach绑定中的数组的从0开始的索引条目。不想其他的context属性,$index是observable的,即会随着数组item的更新而更新。

$parentContext

指定了父节点级别的binding context对象,与$parent不同的是,它是在父节点中指定数据而不是binding context。

$rowData

它是在当前上下文中,原viewmodel的值,通常它相当于$data,但是,如果viewmodel被ko以observable来修饰,$data是unobservable的,而$rowData是observable的。

原文链接:https://www.f2er.com/js/50882.html

猜你在找的JavaScript相关文章