Question

使用淘汰赛，你可以像这样生成一排bootstrap nav-tabs

<ul class="nav nav-tabs question-container" data-bind="foreach: Questions">
  <li role="presentation" data-bind="css: { active: $index() === 0 }">
    <a data-toggle="tab" 
       data-bind="attr: { href: '#q' + QuestionId() }">, text: Caption"></a>
  </li>
</ul>

使用bootstrap-sortable，您只需更改绑定即可对选项卡进行排序。明确记录的限制是您不能将可排序绑定与虚拟元素一起使用，因为它取决于在单个容器元素上定义。

假设我想添加一个标签“添加新问题”，根据Chrome，Internet Explorer，Firefox和Microsoft Excel中使用的添加新标签的方式，显示创建内容的各种选项。

如果我没有尝试将标签排序，我会这样做：

<ul class="nav nav-tabs question-container">
  <!-- ko foreach: Questions-->
  <li role="presentation" data-bind="css: { active: $index() === 0 }">
    <a data-toggle="tab" 
       data-bind="attr: { href: '#q' + QuestionId() }, text: Caption"></a>
  </li>
  <!-- /ko -->
  <li role="presentation" data-bind="css: { active: Questions().length === 0 }">
    <a data-toggle="tab" href="#addQuestion">
    <i class="fa fa-plus"></i>Add a new question</a>
  </li>
</ul>

通过向模板中的<LI>添加标记类“sortable-item”，我们可以通过在bootstrap-sortable选项中定义item: ".sortable-item"来简单地排除元项。但它仍然无法飞行，因为你无法使用带有bootstrap-sortable的虚拟元素。

有没有人知道如何将元素项添加到由bootstrap-sortable管理的集合中？

有四种方法可以解决这个问题。

不要使用bootstrap-sortable，明确地应用jQuery-UI可排序，而是排序更新事件以更新后备存储集合。
使用bootstrap并在绑定完成后注入元项。
修改bootstrap以支持除了绑定模板之外的元项模板的概念。
修改bootstrap以使用虚拟节点的直接父节点。总是父母，即使它是BODY。

我个人赞成选项四，因为它不会改变bootstrap-sortable的应用方式，它只是删除了一个限制。没有重大改变。

选项三几乎同样好，但它增加了概念的复杂性，使学习曲线更加陡峭。

选项二吮吸大石头。它搞砸了关注点的分离。

选项一，这是我实际做的，吮吸更大的岩石。它不仅会污染具有UI行为的视图模型，而且执行起来很复杂，取决于记录不佳和模糊的淘汰内部实用程序，而且它只是简单的丑陋。关于它的一切都是bootstrap-sortable存在的理由。

回答这个评论：

“添加问题”按钮不是问题，因此不应该成为问题列表的一部分

这不是一个问题列表，它是一组可以在问题列表上执行的操作的UI。他们中的大多数是“显示项目X进行编辑”，但其中一个是“创建一个新项目”。还存在用于删除项目和重新排序项目的控件。

我觉得有点讽刺的是，任何人都会声称这不是一个明显的UI设计，而使用网络浏览器 - 这个确切设计的无处不在的例子

Answer 1

目前似乎没有比我在问题中提到的解决方法更好的故事。理想的解决方案是我或其他人写一个淘汰赛绑定。 bootstrap-sortable中的大多数代码似乎与模板化它生成的相当漂亮的表有关，但我认为所需的课程就在那里。

具有bootstrap-sortable的元项目

1 个答案: