控制流綁定如何在 KnockoutJs 中工作

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

文件

• 資料綁定語法
• 綁定上下文
• 「foreach」綁定
• 「if」和「ifnot」綁定
• 「with」與「using」綁定
• 「let」綁定

---

綁定

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

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

控制流程

foreach

綁定 foreach 用於在HTML 元素中建立重複項，為集合中的每個項目產生相同元素的副本（如array 或observable 陣列） ) 在你的視圖模型中。這使您可以輕鬆建立清單或資料透視表來顯示模型中的資料。

當模型array 的內容被修改（透過新增、移動或刪除其條目）時，foreach 的bounding 使用高效率的演算法來找出知道發生了什麼變化，這樣你就可以根據數組更新DOM。這意味著它可以處理模擬變化的任意組合。

• 當向數組添加某些內容時，foreach將渲染模型的新副本並將它們插入到現有的DOM中；
• 當陣列中的某些內容被刪除時，foreach 只會刪除對應的 DOM 元素；
• 當對陣列中的某些內容重新排序時（保留相同的物件實例），foreach 通常只會將對應的 DOM 元素移到新位置。

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

在這種情況下，變數 $data 引用循環中正在處理的當前項目。這允許您在循環中存取該項目的屬性或值。

as 指令可讓您為代表 foreach 迭代周期中目前項目的變數定義自訂名稱。這可以使程式碼更具可讀性和意義。

有時，陣列中的項目不會被刪除，而是被隱藏，而不是真正失去其存在的痕跡。這稱為非破壞性刪除。如果您需要隱藏已銷毀的條目，請將 includeDestroyed 選項設為 false。

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

如果需要對產生的 DOM 元素執行額外的自訂邏輯，可以使用以下任意回呼：

• afterRender：每次複製 foreach 區塊並將其插入文件時都會調用，無論是在第一次初始化 foreach 時還是在稍後將新條目添加到關聯的數組;
時
• afterAdd：類似於 afterRender，只不過它僅在將新條目添加到 array 時調用（而不是在 foreach 首次迭代 array 的初始內容時調用）；
• beforeRemove：當 array 中的項目被刪除時，但在相應的 DOM 節點被刪除之前調用。如果指定了 beforeRemove 回調，則需要手動刪除 DOM 節點，即 KnockoutJs 無法知道何時允許物理刪除 DOM 節點；
• beforeMove：當 array 中的項目在 array 中更改位置時調用，但在移動相應的 DOM 節點之前。請注意，beforeMove 適用於索引已更改的所有數組元素，因此如果在array 的開頭插入新項目，則將為所有其他元素觸發回調（如果指定），作為其索引位置增加了一位元.您可以使用 beforeMove 儲存受影響元素的原始螢幕座標，以便您可以在 afterMove 回呼中為它們的移動設定動畫；
• afterMove：在 array 中的項目更改 array 中的位置以及 foreach 更新 DOM 以匹配之後調用。請注意，afterMove 適用於array 中索引已更改的所有元素，因此如果在array 的開頭插入新項目，則會觸發回調（如果指定）對於所有其他元素，因為它們的索引位置增加了1。

如果和如果不是

if 的綁定 會導致標記部分出現在文件中（並套用其資料綁定屬性），僅當指定表達式計算結果為true（或true 值，例如非空物件或非空字串)。

ifnot 的 綁定 的工作方式與 if 綁定完全相同，只不過它會反轉傳遞給它的任何表達式的結果。

if 和 ifnot 與 vivsible 和hidden 綁定的作用類似。不同之處在於，對於可見，包含的標記始終保留在 DOM 中，並且始終應用其資料綁定 - 可見綁定僅使用 CSS 來切換包含元素的可見性。然而，if 連結會物理地新增或刪除 DOM 中包含的標記，並且僅在表達式為 true 時才將連結套用於後代。如果表達式涉及一些可觀察的值，則每當其值發生變化時，都會重新計算該表達式。

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

與和使用

綁定 with 和 using 建立一個新的綁定上下文，以便後代元素綁定在指定物件的上下文中。

綁定 with 將根據關聯值是否為 falsy 動態新增或刪除後代元素。

此選項可讓您為新的上下文物件定義別名。儘管可以使用 $data.
上下文變數來引用對象

<div data-bind='foreach: { data: myArray, includeDestroyed: false }'>
    ...
</div>

KnockoutJs 3.5 中引入了 using 綁定，作為不需要渲染後代元素時的 with 的替代品。因為 using 重新評估後代連接而不是重新渲染，所以每個後代連接將包含對 using 上下文的額外依賴。

讓

綁定讓您可以定義自訂綁定上下文屬性，您可以在所有後代元素的綁定中引用這些屬性。

<div data-bind="if: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for verdadeiro.</p>
</div>

<div data-bind="ifnot: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for falso.</p>
</div>

以上是控制流綁定如何在 KnockoutJs 中工作的詳細內容。更多資訊請關注PHP中文網其他相關文章！