動態記錄創造淘汰賽JS

Question

使用淘汰賽JS想創建一個表，該表將有4rows和4coulmns。下面是我的數組，它將有16個元素需要放在表格中。

/*----------------------------------------------------------------------*/ 
/* View Model               */ 
/*----------------------------------------------------------------------*/ 
function ViewModel() { 
    var self = this; 
    self.items = ko.observableArray(["1.jpg", 
             "2.jpg", 
             "3.jpg", 
             "4.jpg", 
             "5.jpg", 
             "6.jpg" 
             ]); 
    self.itemRows = ko.computed(function() { //computes the rows dynamically based on items 
     var rows = []; 
     var count = 0; 
     var items = self.items(); //get the item array 
     var current = []; 
     for(var i in items) 
     { 
      var item = items[i]; 
      current.push(item); 
      count++; 

      if (count == 4) 
      { 
       count = 0; 
       rows.push(current); 
       current = []; //next array 
      } 
     } 

     if (current.length > 0) 
     { 
      rows.push(current); 
     } 

     return rows; 
    }); 

    self.bindSort = function() { 

     var startIndex = -1;   
     var sortableSetup = {   
     start: function (event, ui) 
     {   
      startIndex = ui.item.index(); 
     }, 


     stop: function (event, ui) 
     {  
      var newIndex = ui.item.index();   
      if (startIndex > -1) 
      { 
       self.from = ko.observable(startIndex); 
       self.to = ko.observable(newIndex); 
       var iTo = parseInt(self.to()); 
      var iFrom = parseInt(self.from()); 
      var from = self.items()[iFrom]; 
       var to = self.items()[iTo]; 
       self.items()[iTo] = from; 
        self.items()[iFrom] = to; 
        //alert('before'); 
        // alert(from); 
        // alert(to); 
        var fromA = self.items()[iFrom]; 
       var toA = self.items()[iTo]; 
       //alert('after'); 
      //alert(fromA); 
        // alert(toA); 
       self.items.remove(from);    
       self.items.splice(newIndex, 0, toA); 
       self.items.remove(to); 
       self.items.splice(startIndex, 0, fromA); 
          //ui.item.remove(); 
       self.items.valueHasMutated(); 

      } 

     } 
     }; 


     $(".fruitList").sortable(sortableSetup);       

    }; 

} 

/*----------------------------------------------------------------------*/ 
/* KO HTML Binding              */ 
/*----------------------------------------------------------------------*/ 
$(document).ready(function() { 

    // create the view model 
    var model = new ViewModel(); 

    // call the bind method for jquery UI setup 
    model.bindSort(); 

    // binds ko attributes with the html 
    ko.applyBindings(model); 

}); 

，並試圖做到這一點的HTML，

<table data-bind="foreach: itemRows"> 
       <tr class="fruitList" data-bind="foreach: $data"> 
        <td><img data-bind="attr: { src: $data }" /></td> 
       </tr> 
     </table> 

我不能得到數組的長度，也是我怎麼可以打破循環一次，它會在第一4個TDS和然後創建第二行..任何建議？

更新：

下面的代碼似乎並不當我使用排序工作，

start: function (event, ui) 
    {   
     startIndex = ui.item.index(); 
    }, 


    stop: function (event, ui) 
    {  
     var newIndex = ui.item.index(); 

Answer 1

UPDATE：移動到下方爲可排序版本

非排序版本

我創建了一個的jsfiddle似乎已編輯之前滿足您的要求，並提到排序：http://jsfiddle.net/fENSD/4/

我所做的是創建一個計算的observable，它觀察您的項目observable，並以您想要的表格渲染形狀返回一個嵌套數組。這是不是最有效的功能，但也有一些工作，你很可能減少對獲得分配陣列的數量（目前，5個左右將被用於創建每次更新時間4x4網格）：

self.items = ko.observableArray(["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg"]); 

self.itemRows = ko.computed(function() { //computes the rows dynamically based on items 
    var rows = []; 
    var count = 0; 
    var items = self.items(); //get the item array 
    var current = []; 
    for(var i in items) 
    { 
     var item = items[i]; 
     current.push(item); 
     count++; 

     if (count == 4) 
     { 
      count = 0; 
      rows.push(current); 
      current = []; //next array 
     } 
    } 

    if (current.length > 0) 
    { 
     rows.push(current); 
    } 

    return rows; 
}); 

這樣的表呈現像這樣：

<table data-bind="foreach: itemRows"> 
    <tr data-bind="foreach: $data"> 
     <td><img data-bind="attr: { src: $data }" /></td> 
    </tr> 
</table> 

的的jsfiddle包括被更新，以反映以及如果你想看到的是，在添加項目到項目可觀察和表的例子行動。也有在的jsfiddle的一種方式，你可以得到的物品陣列（data-bind="text: items().length"）的長度的例子。

可排序版本

這是一個相當的變化，但我設法排序工作，以及。以從jQuery UI的網站的例子，我有以下幾點：

http://jsfiddle.net/fENSD/11/

這是非常困難的排序表，所以jQuery UI的例子中實際使用的是曾與每個元素採取定義的寬度列表增加一定的寬度。這有效地創建了一個表格。我認爲，既然你使用的圖像，你可以使他們都完全相同的大小。

要做到這一點，我有一些CSS像這樣：

#items { list-style-type: none; margin: 0; padding: 0; width: 200px; } 
#items li { width: 48px; margin: 0px; padding: 0px; float: left; text-align: center; height: 48px; } 

然後我創建像這樣一個適當的裝訂處理程序：

ko.bindingHandlers['sortable'] = { 
    init: function (element, valueAccessor) { 
     var $element = $(element); 
     var observable = valueAccessor(); 
     var value = ko.utils.unwrapObservable(observable); 
     $element.sortable({ 
      stop: function(event, ui) { 
       var prev = ui.item.prev(); 
       var data = ko.dataFor(ui.item[0]); 
       var index = 0; 
       if (prev.length > 0) { 
        //not the first item 
        var prevData = ko.dataFor(prev[0]); 
        var index = value.indexOf(prevData) + 1; 
       } 
       var oldIndex = value.indexOf(data); 
       value.splice(oldIndex, 1); 
       value.splice(index, 0, data); 
       observable.valueHasMutated(); 
      } 
     }); 
    } 
}; 

每當排序進行更新，它修改觀察到的陣列通過了綁定。注意：這是令人難以置信的unrobust，需要檢查以確保傳遞的值實際上是一個可觀察的，然後告訴它的值已經發生了變化。

視圖模型看起來像這樣：

function ViewModel() { 
    var self = this; 

    self.items = ko.observableArray(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"]); 

    self.items.subscribe(function (value) { 
     console.log(value); //this is so you can see that the array is indeed being re-sorted 
    }); 

    self.add = function() { 
     self.items.push("another thing"); 
    }; 
} 

而且呈現：

<ul id="items" data-bind="sortable: items, foreach: items"> 
    <li><img data-bind="attr: { src: $data }" /></li> 
</ul> 

這種方法的侷限性是，如果你的項目有不同的尺寸，可排序的順序看起來會與內存中實際表現的內容不同。但是，如果您的所有元素的大小相同，則應該可以正常工作。另一個問題是這對於重複項目不起作用。然而，爲了解決這個問題，它應該是一個簡單的事情，使每個元素都包含一個包含值（甚至可以是可觀察值）的對象而不是普通的舊字符串。