声明性绑定(Declarative Bindings)

优质
小牛编辑
131浏览
2023-12-01

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

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

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

绑定语法

绑定由2个项组成,即绑定namevalue 。 以下是一个简单的例子 -

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

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

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

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

绑定值

绑定值可以是single valueliteralvariable ,也可以是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.绑定类型和用法
1visible: <binding-condition>

根据特定条件显示或隐藏HTML DOM元素。

2text:<binding-value>

设置HTML DOM元素的内容。

3html:<binding-value>

设置DOM元素的HTML标记内容。

4css:<binding-object>

将CSS类应用于元素。

5style:<binding-object>

定义元素的内联样式属性。

6attr:<binding-object>

要动态地向元素添加属性。

使用控制流绑定

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

Sr.No.绑定类型和用法
1foreach:<binding-array>

在此绑定中,每个数组项都在循环中的HTML标记中引用。

2if:<binding-condition>

如果条件为真,则将处理给定的HTML标记。 否则,它将从DOM中删除。

3ifnot:<binding-condition>

If的否定。 如果条件为真,则将处理给定的HTML标记。 否则,它将从DOM中删除。

4with:<binding-object>

此绑定用于绑定指定对象上下文中对象的子元素。

5component:<component-name> OR component:<component-object>

此绑定用于将组件插入DOM元素并可选地传递参数。

使用表单字段绑定

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

Sr.No.绑定类型和用法
1click: <binding-function>

此绑定用于基于单击调用与DOM元素关联的JavaScript函数。

2event:<DOM-event:handler-function>

此绑定用于侦听指定的DOM事件并基于它们调用关联的处理函数。

3submit: <binding-function>

此绑定用于在提交关联的DOM元素时调用JavaScript函数。

4enable:<binding-value>

此绑定用于根据指定的条件启用某些DOM元素。

5disable:<binding-value>

当参数计算结果为true时,此绑定将禁用关联的DOM元素。

6value:<binding-value>

此绑定用于将相应DOM元素的值链接到ViewModel属性。

7textInput:<binding-value>

此绑定用于在文本框或textarea与ViewModel属性之间创建双向绑定。

8hasFocus:<binding-value>

此绑定用于通过ViewModel属性手动设置HTML DOM元素的焦点。

9checked: <binding-value>

此绑定用于在可检查表单元素和ViewModel属性之间创建链接。

10options:<binding-array>

此绑定用于定义select元素的选项。

11selectedOptions:<binding-array>

此绑定用于处理当前在多列表选择表单控件中选择的元素。

12uniqueName:<binding-value>

此绑定用于为DOM元素生成唯一名称。