绑定在 KnockoutJs 中如何工作

此内容基本上是原始材料的翻译。目的是了解 Magento 2 的 KnockoutJs 并用葡萄牙语创建有关 KnockouJs 的内容。

文档

• 数据绑定语法
• 绑定上下文

绑定

在 KnockoutJs 中，绑定 是连接 ViewModel 逻辑（数据和业务逻辑）与 View (HTML) 的方式。简而言之，正是通过 绑定，用户界面自动反映数据的变化，而不需要直接操作 DOM。

KnockoutJ 中的绑定通过 HTML 元素上的 data-bind 属性进行工作。您可以在该属性中指定要使用的绑定和关联值。

data-bind 属性不是 HTML 原生的，尽管它是完全可以接受的（它严格兼容 HTML 5 并且不会导致 HTML 4 出现问题。但是由于浏览器默认情况下不识别该属性，因此您需要启用Knockout以使其生效。

绑定语法

KnockoutJs 的声明式绑定系统提供了一种简洁而强大的方式将数据绑定到 UI。绑定到简单的数据属性或使用单一绑定通常是容易且明显的。对于更复杂的绑定，它有助于更​​好地理解 KnockoutJs 绑定系统的行为和语法。

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'">
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone">

调用由两项组成，即调用的名称和值，以冒号分隔。一个元素可以包含多个链接（相关或不相关），每个链接用逗号分隔。当前绑定中使用的数据可以由对象引用。该对象称为绑定上下文（绑定上下文）。

绑定值可以是单个值、变量或文字，或者几乎任何有效的 JavaScript 表达式。

链接可以包含任意数量的空白（空格、制表符和换行符），因此您可以根据需要使用它们来组织链接。

链接可以包含 JavaScript 样式的注释（//... 和 /*...*/）。例如：

如果指定的绑定没有值，KnockoutJs 将为该绑定赋予未定义的值。

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

Variável de Contexto	Descrição
$root	Esta propriedade sempre se refere ao ViewModel de nível superior. Isso torna possível acessar métodos de nível superior para manipular ViewModel. Geralmente esse é o objeto passado para ko.applyBindings.
$data	Esta propriedade é muito parecida com a palavra-chave this do Javascript. A propriedade $data em um contexto de ligação refere-se ao objeto ViewModel para o contexto atual.
$index	Esta propriedade contém o índice de um item atual de um array dentro de um loop foreach. O valor de $index mudará automaticamente conforme e quando a matriz Observable subjacente for atualizada. Obviamente, este contexto está disponível apenas para ligações foreach.
$parent	Esta propriedade refere-se ao objeto ViewModel pai. Isso é útil quando se deseja acessar propriedades externas do ViewModel de dentro de um loop aninhado.
$parentContext	Esta propriedade é diferente da $parent, pois a $parent refere-se a dados. Considerando que $parentContext refere-se ao contexto de ligação.
$rawdata	Este contexto contém o valor bruto do ViewModel na situação atual. Esta propriedade se assemelha a $data, mas a diferença é que, se o ViewModel for agrupado em Observable, então $data será apenas desembrulhado. O ViewModel e $rawdata tornam-se dados observáveis reais.
$component	Este contexto é usado para se referir ao ViewModel daquele componente, quando está dentro de um determinado componente.
$componentTemplateNodes	É uma representação de uma matriz de nós DOM passados para esse componente específico quando se está dentro de um modelo de componente específico.

连接名称通常应与注册的连接（内置或自定义）匹配，或者是另一个连接的参数。如果名称与其中任何一个都不匹配，KnockoutJs 将忽略它（没有任何错误或警告）。因此，如果连接失败，请首先检查名称是否正确。

绑定值可以是单个值、变量或文字或几乎任何有效的 JavaScript 表达式。以下是各种连接值的示例：

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'">
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone">

以上是绑定在 KnockoutJs 中如何工作的详细内容。更多信息请关注PHP中文网其他相关文章！