KnockoutJS - Declarative Bindings

KnockoutJS声明性绑定 - 从简单和简单的步骤学习KnockoutJS，从基本到高级概念，包括概述，环境设置，应用程序，MVVM框架，Observables，计算可观察量，声明性绑定，依赖性跟踪，自动UI刷新，模板化，组件。

KnockoutJS中的声明性绑定提供了一种将数据连接到UI的强大方法.

理解绑定和Observable之间的关系非常重要.从技术上讲，这两者是不同的.您可以使用普通JavaScript对象作为ViewModel，KnockoutJS可以正确处理View的绑定.

如果没有Observable，UI中的属性将仅首次处理.在这种情况下，它无法根据基础数据更新自动更新.为此，必须将绑定引用到Observable属性.

绑定语法

绑定包含2个项目，绑定名称和值.以下是一个简单的示例 :

Today is :

这里，text是绑定名称，whatDay是绑定值.您可以使用逗号分隔多个绑定，如以下语法所示.

Your name:

此处，按下每个键后更新值.

绑定值可以是单值，文字，变量或者可以是 JavaScript 表达式.如果绑定引用了一些无效的表达式或引用，则KO将产生错误并停止处理绑定.

以下是几个绑定示例.

Enter employee name:

Sort Array

请注意以下几点和减号;

对象可以引用当前绑定中使用的数据.此对象称为绑定上下文.

上下文层次结构由KnockoutJS自动创建和管理.下表列出了KO提供的不同类型的绑定上下文.

Sr.No.	绑定上下文类型&说明
1	$ root 这总是指顶级ViewModel.这使得可以访问用于操作ViewModel的顶级方法.这通常是对象，传递给ko.applyBindings.
2	$ data 这个属性很像 this Javascript对象中的关键字.绑定上下文中的$ data属性引用当前上下文的ViewModel对象.
3	$ index 此属性包含当前项的索引foreach循环中的数组.当更新基础Observable数组时，$ index的值将自动更改.显然，此上下文仅适用于 foreach 绑定.
4	$ parent 此属性引用父ViewModel对象.当您想要从嵌套循环内部访问外部ViewModel属性时，这非常有用.
5	$ parentContext 绑定在上下文中的对象父级别称为 $ parentContext .这与 $ parent 不同. $ parent指的是数据.然而， $ parentContext 指的是绑定上下文.例如.您可能需要从内部上下文访问外部foreach项的索引.
6	$ rawdata 此上下文保存当前情况下的原始ViewModel值.这类似于$ data，但区别在于，如果ViewModel包含在Observable中，那么$ data就会被解包. ViewModel和$ rawdata成为实际的Observable数据.
7	$ component 此内容用于指代该组件的ViewModel，当您在特定组件.例如.您可能希望从ViewModel访问某些属性而不是组件模板部分中的当前数据.
8	$ componentTemplateNodes 这表示DOM数组当您在特定组件模板中时，节点传递给该特定组件.

以下术语也可用于绑定但实际上不是绑定上下文.

以下是KO提供的用于处理文本和视觉外观的绑定类型列表.

Sr.No.	绑定类型&用法
1	可见:< binding-condition> 根据特定条件显示或隐藏HTML DOM元素.
2	text:< binding-value> 设置HTML DOM元素的内容.
3	html:< binding-value> 设置DOM元素的HTML标记内容.
4	css:< binding-object> 将CSS类应用于元素.
5	麦粒肿le:< binding-object> 定义元素的内联样式属性.
6	attr:< binding-object> 动态地向元素添加属性.

以下是KO提供的控制流绑定类型列表.

Sr.No.	绑定类型&用法
1	foreach:< binding-array> 在此绑定中，每个数组项都在循环中的HTML标记中引用./p>
2	if:< binding-condition> 如果条件为真，则将处理给定的HTML标记.否则，它将从DOM中删除.
3	ifnot:< binding-condition> 否定If.如果条件为真，则将处理给定的HTML标记.否则，它将从DOM中删除.
4	with:< binding-object> 此绑定用于绑定指定对象上下文中对象的子元素.
5	组件:< component-name> OR组件:< component-object> 此绑定用于将组件插入DOM元素并可选地传递参数.

以下是KO提供的表单字段绑定类型列表.

Sr.No.	绑定类型&用法
1	点击:< binding-function> 此绑定用于调用与基于a的DOM元素关联的JavaScript函数点击.
2	事件:< DOM-event:handler-function> 此绑定用于监听指定的DOM事件并根据它们调用相关的处理函数.
3	提交:< binding-function> 此绑定用于在提交关联的DOM元素时调用JavaScript函数.
4	启用:< binding-value> 此绑定用于根据指定条件启用某些DOM元素.
5	禁用:< binding-value> 当参数计算结果为true时，此绑定将禁用关联的DOM元素.
6	value:< binding-value> 此绑定用于将相应DOM元素的值链接到ViewModel属性.
7	textInput:< binding-value> 此绑定用于在文本框或textarea与ViewModel属性之间创建双向绑定.
8	hasFocus:< binding-value> 此绑定用于通过ViewModel属性手动设置HTML DOM元素的焦点.
9	检查:< binding-value> 此绑定用于在可检查表单元素和ViewModel属性之间创建链接.
10	options:< binding-array> 此绑定用于定义select元素的选项.
11	selectedOptions:< binding-array> 此绑定用于处理当前在多列表选择表单控件中选择的元素.
12	uniqueName:< binding-value> 此绑定用于为DOM元素生成唯一名称.