具有bootstrap-sortable的元项目

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管理的集合中？

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

1. 不要使用bootstrap-sortable，显式应用jQuery-UI可排序，而是排序更新事件以更新后备存储集合。
2. 绑定完成后使用bootstrap并注入元项。
3. 修改引导程序以支持除绑定模板之外的元项目模板的概念。
4. 修改引导程序以使用虚拟节点的直接父节点。 总是有一个父母，即使它是身体。

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

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

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

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

---

回答这个评论：

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

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

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

Answer 1

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