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