文字和外觀綁定在 KnockoutJs 中如何運作

此內容基本上是原始資料的翻譯。目的是了解 Magento 2 的 KnockoutJs 並用葡萄牙語創建有關 KnockouJs 的內容。

文件

• 資料綁定語法
• 綁定上下文
• 「可見」與「隱藏」綁定
• 「文字」綁定
• 「html」綁定
• 「class」和「css」綁定
• 「樣式」綁定
• 「attr」綁定

---

綁定

在 KnockoutJs 中，綁定 是連接 ViewModel 邏輯（資料和業務邏輯）與 View (HTML) 的方式。簡而言之，正是透過 綁定，使用者介面自動反映資料的變化，而不需要直接操作 DOM。

KnockoutJ 中的綁定透過 HTML 元素上的 data-bind 屬性進行工作。您可以在該屬性中指定要使用的綁定和關聯值。

控製文字和外觀

可見的

綁定 可見性用於根據 ViewModel 中 observable 的值來控制 HTML 元素的可見性。它允許您根據 ViewModel.
中定義的特定條件顯示或隱藏元素

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

當條件是類似於 false 的值（false、0、null 或 undefined）時，可見綁定將樣式設為 none，從而使其隱藏。這優先於您可以使用 CSS 設定的任何顯示樣式。

隱

綁定 hide 用於根據 ViewModel 中 observable 的值隱藏 HTML 元素。與控制元素可見性的 *visible* 綁定不同，*hidden* 綁定會在滿足指定條件時隱藏 UI 元素。

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

文字

綁定文字用於使用其ViewModel中的observable值來更新HTML元素的內容。它允許將 observable 的文字直接插入 HTML 元素中，確保 observable 值的任何變更都會自動反映在顯示的文字中。

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

如果此參數是一個可觀察值，則只要該值發生變化，綁定就會更新元素的文字。如果參數不是observable，則只會設定元素文字一次，以後不會再更新

如果提供的值不是數字或字串，顯示的文字將相當於 yourParameter.toString()。

由於此綁定使用文字節點來設定其文字值，因此可以安全地設定任何字串值，而不會帶來 HTML 或腳本注入的風險。

超文本標記語言

綁定 html 用於將動態 HTML 內容插入 UI 元素中。它允許使用從 observable 產生的 HTML 或其 ViewModel.
的表達式來更新元素的內容

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

KnockoutJs 清除先前的內容，然後使用jQuery 的html 函數將元素內容設為參數值，或將string 解析為HTML 節點並將每個節點附加為元素的子級（如果jQuery不是）可用。

如果此參數是一個可觀察，則只要值發生變化，綁定就會更新元素的內容。如果參數不是observable，只會設定元素內容一次，以後不會再更新

如果提供的值不是數字或字串，顯示的文字將相當於 yourParameter.toString()。

班級

binding 類別用於根據 observable 的值或其 ViewModel 的表達式來控制應用於 HTML 元素的 CSS 類別。這允許您根據應用程式的不同條件或狀態動態更改元素的 CSS 類別。類別不是合法的識別名稱，將類別分配給 HTML 元素的正確方法是將識別碼名稱放在引號中，使其成為文字 string.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

參數值必須是與您要新增到元素的 CSS 類別相對應的 字串。如果參數引用 observable，則只要值更改，綁定就會更新類，刪除任何先前添加的類並添加新值的一個或多個類。

CSS

綁定 css 用於根據 observable 的值或其 ViewModel 的表達式動態地將 CSS 樣式套用到 HTML 元素。這允許您根據應用程式的不同條件或狀態更改元素的視覺樣式。您可以根據相同的條件定義多個 CSS 類，方法是將名稱括在引號中。

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

必須傳遞一個 JavaScript 對象，其中屬性名稱是您的 CSS 類，其值會根據當時是否應應用該類別而評估為 true 或 false。

如果參數引用 observable 值，只要 observable 發生更改，綁定就會新增或刪除 CSS 類別。如果參數沒有引用 observable，它只會添加或刪除該類別一次，並且以後不會再這樣做。

風格

綁定樣式用於根據observable的值或其ViewModel的表達式將內聯CSS樣式應用於HTML元素。這允許您根據應用程式的不同條件或狀態直接內聯更改元素的視覺樣式。

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

必須傳遞一個 JavaScript 對象，其中屬性名稱與樣式名稱相對應，值與要套用的樣式的值相對應。

如果參數參考 observable，只要 observable 發生變化，綁定就會更新樣式。如果參數沒有引用 observable，它只會設定一次樣式，以後不會再更新它們。

如果您想要套用名稱不是合法 JavaScript 識別碼的樣式（因為它包含連字號或類似內容），您可以將其括在引號中或使用帶有 camelCase 的名稱風格。

{ '字型粗細': someValue }
{ fontWeight: someValue }

如果您將簡單的數值套用於需要單位的樣式，KnockoutJs 會在設定樣式之前將 px 附加到該值。

屬性

綁定屬性用於根據observable或ViewModel表達式的值設定或更新元素上的HTML屬性。這允許您根據應用程式的不同條件或狀態動態變更 HTML 元素的屬性。

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

必須傳遞一個 JavaScript 對象，其中屬性名稱與屬性名稱相對應，值與要應用的屬性的值相對應。

如果參數引用

observable，只要 observable 更改，綁定就會更新屬性。如果參數沒有引用 observable，它只會設定該屬性一次，以後不會更新。

以上是文字和外觀綁定在 KnockoutJs 中如何運作的詳細內容。更多資訊請關注PHP中文網其他相關文章！