KnockoutJS教程

KnockoutJS 声明式绑定

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'" />
这里,每次按下键后都会更新值。

绑定值

绑定值可以是 单个值文字变量或者可以是 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 循环内数组的当前项的索引。 $index 的值将在底层 Observable 数组更新时自动更改。显然,此上下文仅适用于 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 可见:<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 提交:<binding-function>
此绑定用于在提交关联的 DOM 元素时调用 JavaScript 函数。
4 启用:<binding-value>
此绑定用于根据指定条件启用某些 DOM 元素。
5 禁用:<binding-value>
当参数求值为真时,此绑定禁用关联的 DOM 元素。
6 value: <binding-value>
此绑定用于将各个 DOM 元素的值链接到 ViewModel 属性中。
7 textInput: <binding-value>
这个绑定是用于在文本框或文本区域和 ViewModel 属性之间创建 2 向绑定。
8 hasFocus: <binding-value>
此绑定用于通过 ViewModel 属性手动设置 HTML DOM 元素的焦点.
9 已检查:<binding-value>
此绑定用于在可检查表单元素和 ViewModel 属性之间创建链接。
10 options: <binding-array>
此绑定用于定义选择元素的选项。
11 selectedOptions: <binding-array>
此绑定用于处理当前在多列表选择表单控件中选择的元素.
12 uniqueName: <binding-value>
此绑定用于为 DOM 元素生成唯一名称。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4