綁定在 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中文網其他相關文章！