如何在数据绑定中的两种情况之间切换条件

Question

我有一个有序列表，我想设置条件，以便里面的列表项可以排序。

如果条件$root.userPermissionsList().write()为真，那么有序列表将是可排序的：

<ol class="timeline Question" 
    data-bind=" sortable: {data: questions, afterAdd: $root.focusQuestion}">

相反，如果

!($root.userPermissionsList().write())

那么有序列表将不可排序：

<ol class="timeline Question" data-bind=" foreach: {data: questions}">

我尝试这样组合条件：

<ol class="timeline Question" 
    data-bind="visible:$root.userPermissionsList().write(), sortable: {data: questions, afterAdd: $root.focusQuestion}">
<ol class="timeline Question"
    data-bind="visible:!($root.userPermissionsList().write()), foreach: {data: questions}">

但它似乎不起作用。有人知道如何在这两种情况之间切换吗？

Answer 1

Knockout 的visible 绑定使用css 属性设置display: none 来隐藏元素。因此，您的解决方案将生成类似于以下内容的 HTML：

<ol style="display: none;">
  <ol>
  </ol>
</ol>

这不是有效的标记。您可以使用 knockout 的 if 绑定来确保只将一个有序列表添加到 DOM 树中。

<!-- ko if: $root.userPermissionsList().write() -->
<ol class="timeline Question" data-bind="sortable: {data: questions, afterAdd: $root.focusQuestion}">
  <li> ... </li>
</ol>
<!-- /ko -->
<!-- ko ifnot: $root.userPermissionsList().write() -->
<ol class="timeline Question" data-bind="foreach: questions">
  <li> ... </li>
</ol>
<!-- /ko -->

如果 write 是一个 observable，knout 会在 DOM 每次更新时移除并添加一个列表元素（这可能很慢）。

如果它不可观察，则必须在 <ol> 绑定数据之前正确设置其值。

虚拟元素绑定不是很漂亮。您还可以定义两个模板（一个使用 sortable，一个使用普通 foreach）并根据 write 的值选择一个模板。但我们不要离题太远......