HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

KnockoutJS - 声明式绑定

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

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

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

绑定语法

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

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

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

您的姓名:<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 提供的不同类型的绑定上下文。

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> 或 component: <component-object>

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

使用表单字段绑定

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

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

此绑定用于根据点击调用与 DOM 元素关联的 JavaScript 函数。
2 event: <DOM-event: handler-function>

此绑定用于监听指定的 DOM 事件并根据它们调用关联的处理程序函数。
3 提交: <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>

此绑定用于在文本框或文本区域与 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 元素生成唯一名称。
❮ 上一节 下一节 ❯