javascript - 将 JSON 数组拆分为每行四个项目(同时保持所有内容可观察)

Question

当我调用 GET api/home API 端点时，我得到了某种数据结构 - 有两个数组:一个用于书籍，一个用于杂志。我想在每行四个项目的网格中显示项目，但我不知道该怎么做。我还需要保持这些项目( knockout )可观察 - 在我的 viewModel 中我有:

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>

但是我需要为每一行设置一个“row-fluid”，其中包含四个项目，除非是最后一行，其中可能包含少于四个项目(书籍或杂志)。现在它只是一个包含所有内容的“行流体”，因此布局全部困惑。

我想我可以使用元素的 $id 来确定是否应该创建一个新的 row-fluid ($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>