此内容基本上是原始材料的翻译。目的是了解 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中文网其他相关文章！
