此內容基本上是原始資料的翻譯。目的是了解 Magento 2 的 KnockoutJs 並用葡萄牙語創建有關 KnockouJs 的內容。
在 KnockoutJs 中，綁定 是連接 ViewModel 邏輯（資料和業務邏輯）與 View (HTML) 的方式。簡而言之，正是透過 綁定，使用者介面自動反映資料的變化，而不需要直接操作 DOM。
KnockoutJ 中的綁定透過 HTML 元素上的 data-bind 屬性進行工作。您可以在該屬性中指定要使用的綁定和關聯值。
data-bind 屬性不是HTML 原生的，儘管它是完全可以接受的（它嚴格兼容HTML 5 並且不會導致HTML 4 出現問題。但是由於瀏覽器默認情況下不識別該屬性，因此您需要啟用Knockout以使其生效。
綁定語法
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中文網其他相關文章！
