控制流綁定如何在 KnockoutJs 中工作-js教程-PHP中文網

Como funcionam Bindings de Fluxo de Controle no 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中文網其他相關文章！