具有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中的大多數代碼似乎與模板化它生成的相當漂亮的表有關，但我認為必需的課程就在那里。