KnockoutJS - 声明性绑定

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

了解绑定和可观察对象之间的关系很重要。从技术上来说，这两者是不同的。您可以使用普通的 JavaScript 对象，因为 ViewModel 和 KnockoutJS 可以正确处理 View 的绑定。

如果没有 Observable，来自 UI 的属性将仅在第一次被处理。在这种情况下，它无法根据底层数据更新自动更新。为了实现这一点，绑定必须引用 Observable 属性。

绑定语法

绑定由 2 项组成，即绑定名称和值。以下是一个简单的例子 -

Today is : <span data-bind = "text: whatDay"></span>

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

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

在这里，按下每个键后值都会更新。

绑定值

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

以下是一些绑定示例。

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

请注意以下几点 -

空格没有任何区别。
从 KO 3.0 开始，您可以跳过绑定值，这会给绑定一个未定义的值。

绑定上下文

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

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

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

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

$context - 这只是现有的绑定上下文对象。
$element - 该对象引用当前绑定中 DOM 中的元素。

使用文本和外观

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

先生。	绑定类型和用途
1	可见：<绑定条件> 根据特定条件显示或隐藏 HTML DOM 元素。
2	文本：<绑定值> 设置 HTML DOM 元素的内容。
3	html: <绑定值> 设置 DOM 元素的 HTML 标记内容。
4	css: <绑定对象> 将 CSS 类应用到元素。
5	样式：<绑定对象> 定义元素的内联样式属性。
6	attr: <绑定对象> 动态向元素添加属性。

使用控制流绑定

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

先生。	绑定类型和用途
1	foreach: <绑定数组> 在此绑定中，每个数组项在 HTML 标记中循环引用。
2	if: <绑定条件> 如果条件为 true，则将处理给定的 HTML 标记。否则，它将从 DOM 中删除。
3	ifnot: <绑定条件> If 的否定。如果条件为 true，则将处理给定的 HTML 标记。否则，它将从 DOM 中删除。
4	与：<绑定对象> 此绑定用于绑定指定对象上下文中对象的子元素。
5	组件：<组件名称> 或组件：<组件对象> 此绑定用于将组件插入 DOM 元素并选择性地传递参数。

使用表单字段绑定

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

先生。	绑定类型和用途
1	单击：<绑定功能> 此绑定用于根据单击调用与 DOM 元素关联的 JavaScript 函数。
2	事件：<DOM 事件：处理函数> 此绑定用于侦听指定的 DOM 事件并根据它们调用关联的处理函数。
3	提交：<绑定函数> 此绑定用于在提交关联的 DOM 元素时调用 JavaScript 函数。
4	启用：<绑定值> 此绑定用于根据指定条件启用某些 DOM 元素。
5	禁用：<绑定值> 当参数计算结果为 true 时，此绑定将禁用关联的 DOM 元素。
6	值：<绑定值> 此绑定用于将各个 DOM 元素的值链接到 ViewModel 属性中。
7	文本输入：<绑定值> 此绑定用于在文本框或文本区域与 ViewModel 属性之间创建 2 路绑定。
8	hasFocus: <绑定值> 此绑定用于通过 ViewModel 属性手动设置 HTML DOM 元素的焦点。
9	检查：<绑定值> 此绑定用于在可检查表单元素和 ViewModel 属性之间创建链接。
10	选项：<绑定数组> 此绑定用于定义选择元素的选项。
11	selectedOptions: <绑定数组> 此绑定用于处理当前在多列表选择表单控件中选择的元素。
12	唯一名称：<绑定值> 此绑定用于为 DOM 元素生成唯一的名称。