0

GET api / home APIエンドポイントを呼び出すと、特定のデータ構造が得られます。1つはBooks用、もう1つはMagazines用の2つの配列があります。1行に4つのアイテムのグリッドでアイテムを表示したいのですが、その方法がわかりません。また、これらのアイテム（ノックアウト）を観察可能に保つ必要があります-私の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>

ただし、各行に「行流体」が必要です。これには、4つ未満のアイテム（本または雑誌）が含まれる可能性がある最後の行でない限り、4つのアイテムが含まれます。今のところ、それはすべてを含む単一の「行流体」であるため、レイアウトはすべて混乱しています。

要素の$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",
            }]};
4

1 に答える 1

2

このユースケースで私が行ったことは、配列の配列である計算されたオブザーバブルを作成することです。第1レベルは行で、第2レベルは列です。

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>
于 2013-03-25T20:29:32.903 に答える