声明性绑定（Declarative Bindings）

优质

小牛编辑

136浏览

2023-12-01

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

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

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

绑定语法

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

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

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

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

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

绑定值

绑定值可以是single value ， literal ， variable ，也可以是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开始，您可以跳过绑定值，该绑定值将为绑定提供未定义的值。

绑定上下文

当前绑定中使用的数据可以由对象引用。此对象称为binding context 。

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

Sr.No.	绑定上下文类型和描述
1	$root 这总是指顶级ViewModel。这使得可以访问操作ViewModel的顶级方法。这通常是对象，传递给ko.applyBindings。
2	$data 这个属性很像Javascript对象中的this关键字。绑定上下文中的$ 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节点数组。

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

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

使用文本和外观

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

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

使用控制流绑定

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

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

使用表单字段绑定

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

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