KnockoutJS - 声明式绑定

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

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

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

绑定语法

绑定由 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	$root 这始终指的是顶级 ViewModel。这使得可以访问用于操作 ViewModel 的顶级方法。这通常是传递给 ko.applyBindings 的对象。
2	$data 此属性非常类似于 Javascript 对象中的this关键字。绑定上下文中的 $data 属性指的是当前上下文的 ViewModel 对象。
3	$index 此属性包含 foreach 循环内数组中当前项目的索引。$index 的值将在底层可观察数组更新时自动更改。显然，此上下文仅对foreach绑定可用。
4	$parent 此属性指的是父 ViewModel 对象。当您想从嵌套循环内部访问外部 ViewModel 属性时，这很有用。
5	$parentContext 在父级绑定的上下文对象称为$parentContext。这与$parent不同。$parent 指的是数据。而$parentContext指的是绑定上下文。例如，您可能需要从内部上下文中访问外部 foreach 项目的索引。
6	$rawdata 此上下文在当前情况下保存原始 ViewModel 值。这类似于 $data，但区别在于，如果 ViewModel 包裹在可观察对象中，则 $data 仅解包。ViewModel 和 $rawdata 成为实际的可观察数据。
7	$component 当您在特定组件内部时，此上下文用于引用该组件的 ViewModel。例如，您可能希望访问 ViewModel 中的某些属性而不是组件模板部分中的当前数据。
8	$componentTemplateNodes 当您在特定组件模板内时，这表示传递给该特定组件的 DOM 节点数组。

以下术语也存在于绑定中，但实际上并非绑定上下文。

$context - 这不过就是现有的绑定上下文对象。
$element - 此对象指的是当前绑定中 DOM 中的元素。

处理文本和外观

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

序号	绑定类型和用法
1	visible: <绑定条件> 根据某些条件显示或隐藏 HTML DOM 元素。
2	text: <绑定值> 设置 HTML DOM 元素的内容。
3	html: <绑定值> 设置 DOM 元素的 HTML 标记内容。
4	css: <绑定对象> 将 CSS 类应用于元素。
5	style: <绑定对象> 定义元素的内联样式属性。
6	attr: <绑定对象> 动态地向元素添加属性。

处理控制流绑定

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

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

处理表单字段绑定

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

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

打印页面