控制流绑定如何在 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中文网其他相关文章！