javascript - 将JSON数组拆分为每行四个项目的行(同时保持可观察的一切)

当我调用GET api / home API端点时，我得到了某种数据结构-有两个数组：一个数组用于Books，一个数组用于Magazines。我想在每行四个项目的网格中显示项目，但是我不确定该怎么做。我还需要保持这些项目（淘汰）可见-在我的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>

但是我需要为每行包含一个“行流体”，其中包含四项，除非它是最后一行，它可以包含少于四项（书或杂志）。现在，它只是包含所有内容的单个“行流体”，因此布局已全部废弃。

我在想我可以使用元素的$ 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",
            }]};

最佳答案

我为此用例所做的是使计算的可观察值成为数组数组，第一级为行，第二级为列。

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>