將JSON數組分割成四行（每個行都保持可見）

Question

當我調用GET api/home API端點時，我得到了一個特定的數據結構 - 有兩個數組：一個用於書籍，一個用於雜誌。我想在每行四個網格中顯示這些項目，但我不知道如何去做。我還需要保持這些項目（淘汰賽）可觀察到的 - 我的視圖模型中我有：

var mapping = { 
     create: function(options) { 
      //customize at the root level. 
      var innerModel = ko.mapping.fromJS(options.data); 

      return innerModel; 
     } 
    }; 

    var homeViewModel = ko.mapping.fromJS(homeData, mapping); 
    //debugger; 
    return homeViewModel; 

在我的觀點，我有：

<div class="row-fluid"> 
     <!-- ko foreach: books --> 
     <div class="span3"> 
     </div> 
     <!-- /ko --> 

     <!-- ko foreach: magazines --> 
     <div class="span3"> 
     </div> 
     <!-- /ko --> 
</div> 

但我需要有一個「排液」爲每行包含四個項目，除非它是最後一行，其中可能包含少於四個項目（書籍或雜誌）。現在它只是一個包含所有內容的「行流體」，因此佈局全部都被廢棄了。

我在想我可以使用元素的$ id來弄清楚我是否應該創建一個新的行流（$ id％4 == 0），但是我不知道如何保持一切可觀察如果我這樣做，或者如何重構我的viewModel。任何提示將不勝感激！

homeData定義如下：

var homeData = { 
     "$id": "1", 
     "totalBooks": 40, 
     "totalMagazines": 20, 
     "books": [ 
      { 
       "$id": "2", 
       "bookId": 1, 
       "title": "Test Title"     
      }, 
      { 
       "$id": "3", 
       "bookId": 2, 
       "title": "Test Title"     
      }, 
      { 
       "$id": "4", 
       "bookId": 3, 
       "title": "Test Title"     
      }, 
      { 
       "$id": "5", 
       "bookId": 4, 
       "title": "Test Title"     
      }, 
      { 
       "$id": "6", 
       "bookId": 5, 
       "title": "Test Title"     
      }, 
      { 
       "$id": "7", 
       "bookId": 6, 
       "title": "Test Title"     
      }, 
      { 
       "$id": "8", 
       "bookId": 7, 
       "title": "Test Title"     
      }, 
      { 
       "$id": "9", 
       "bookId": 8, 
       "title": "Test Title"     
      } 
     ], 
     "magazines": [ 
      { 
       "$id": "9", 
       "magazineId": 1, 
       "title": "test magazine 0", 
      }, 
      { 
       "$id": "10", 
       "magazineId": 2, 
       "title": "test magazine 0", 
      }, 
      { 
       "$id": "11", 
       "magazineId": 3, 
       "title": "test magazine 0", 
      }, 
      { 
       "$id": "12", 
       "magazineId": 4, 
       "title": "test magazine 0", 
      }, 
      { 
       "$id": "13", 
       "magazineId": 5, 
       "title": "test magazine 0", 
      }]}; 

Answer 1

什麼

我用於該用途的情況下所做的是使一個可觀察到的計算是一個數組的數組，第一電平是行和第二水平面列。

var groupObsArray = function(itemsPerGroup,observableArray) { 
    return ko.computed(function() { 
     var obsArrData = observableArray(); 
     var groupedItems = []; 
     var aGroup = []; 
     for (var i=0;i<obsArrData.length;i++) 
     { 
      aGroup.push(obsArrData[i]) 
      if(i%itemsPerGroup === 0) { 
       groupedItems.push(aGroup); 
       aGroup = []; 
      } 
     } 
     return groupedItems; 
    }); 
} 
var mapping = { 
    create: function(options) { 
     //customize at the root level. 
     var innerModel = ko.mapping.fromJS(options.data); 

     return innerModel; 
    } 
}; 

var homeViewModel = ko.mapping.fromJS(homeData, mapping); 

homeViewModel.MagazineRows = groupObsArray(4,homeViewModel.magazines); 
homeViewModel.BookRows = groupObsArray(4,homeViewModel.books); 

標記

<div class="readingMaterials magazines" data-bind="foreach:MagazineRows"> 
    <div class="row-fluid" data-bind="foreach:$data"> 
     <div class="span3" data-bind="text:title"> 
     </div> 
    </div> 
</div>