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，则每次更新时，knockout都会删除并向DOM添加一个list元素（可能很慢）。

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

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

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

1 个答案: