將最後一個選項卡添加到可排序的選項卡列表中

Question

我使用的是twitter bootstrap，knockout，knockout-sortable和JQuery UI（也是haml，但對問題無關緊要）。我顯示如下所示的選項卡式列表。它添加了一個帶有按鈕的最終選項卡。

%ul.nav.nav-tabs 
    /ko foreach: pages 
    %li 
    %span{ "data-bind" => "text: name()" } 
//ko 
    %li 
    %button.btn 
     %i.icon-plus 

我試圖使標籤排序（通過拖動），但我正在與按鈕的問題：

%ul.nav.nav-tabs{ "data-bind" => "sortable: pages" } 
    %li 
    %span{ "data-bind" => "text: name()" } 
    /%li 
/%button.btn 
/ %i.icon-plus 

我不能使用/ko sortable: pages，因爲它不工作（The binding 'sortable' cannot be used with virtual elements）。我怎樣才能達到相同的效果（最後一個標籤是一個按鈕）與排序？儘管不能移動最終的標籤/按鈕。

答案可能不一定是添加一個選項卡，它可能是添加一個出現在選項卡末尾的元素。

更新：

的jsfiddle：http://jsfiddle.net/pbNvz/6/

Answer 1

Custom binding能爲你做的工作，這裏是更新的小提琴：

http://jsbin.com/edopuh/3/edit

對於從排序排除任何特定的li元素元素你可以使用items選項的jQuery UI排序插件，它接受jQuery選擇器。

更新

對於運動項目後，做的事情，你可以使用jQuery UI的可排序的Update event。檢查此更新的小提琴，在運動項目後，這撥弄你會得到警告：

Updated Fiddle