声明性绑定(Declarative Bindings)
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元素生成唯一名称。 |