位置: 编程技术 - 正文

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

编辑：rootadmin

推荐整理分享认识Knockout及如何使用Knockout绑定上下文(认识iu)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:认识克课件,认识iu,认识iu,认识ue,认识ei,认识ue,认识ue,认识克教案,内容如对您有帮助，希望把文章链接给更多的朋友！

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后只有K；

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

ko采用的是MVVM设计模式，即model view viewModel。

简单的例子

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

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

Binding context

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

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

$parent

$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的属性的时候。

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

$parentContext

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

$rowData

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

如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上使用onEndEdit事件（该事件可以获取到editor对象，onAfterEdit事件获取不到Editor对象）通过editor拿到输入数据并保存。intci=0;for(Columncol:columnList){for(Comboboxcbb:c

JS插件overlib用法实例详解本文实例讲述了overlib用法。分享给大家供大家参考，具体如下：overLIB是一个生成提示框与弹出菜单等页面效果的一段非常优秀的JS代码。它可以简单的

JavaScript动态设置div的样式的方法有时候需要根据需要动态设置div的样式，当然对于稍有经验的javascript开发者来说，这一切都是那么的简单，但是对于初学者或者说没有相关经验的开发

标签: 认识iu

本文链接地址:https://www.jiuchutong.com/biancheng/385560.html 转载请保留说明！

上一篇：详解Document.Cookie(详解各种汽油一吨等于多少升)

下一篇：如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上(easyui-dialog)