1

オンラインで見つけたものから、現時点では、foreachデータバインドを使用して、ノックアウトで観察可能なオブジェクトのプロパティを反復処理することはできないと思います。

誰かが私がやろうとしていることの解決策を手伝ってくれるなら、私はとても感謝しています。

映画オブジェクトの配列があるとしましょう：

var movies = [{
    title: 'My First Movie',
    genre: 'comedy',
    year: '1984'    
},
{
    title: 'My Next Movie',
    genre: 'horror',
    year: '1988'
},
];

そして、私がやりたいのは、このデータをテーブルに表示することですが、映画のジャンルごとに異なるテーブルです。

だから私はこのようなことを試みました：

<div data-bind="foreach: movieGenre">
    <table>
        <tr>
            <td data-bind="year"></td>
            <td data-bind="title"></td>
            <td data-bind="genre"></td>
        </tr>
    </table>
</div>

そして私のデータソースは次のように変更されました：

for (var i = 0; i < movies.length; ++i) {
    if (typeof moviesGenres[movies.genre] === 'undefined')
        moviesGenres[movies.genre] = [];
    moviesGenres[movies.genre].push(movie);
}

私は他の12の解決策を試しましたが、それはノックアウトの知識が不足しているのか（まだかなりグリーンです）、それとも私が望む方法では不可能なのか疑問に思い始めています。 。

4

1 に答える 1

0

配列「movies」をKO監視可能配列にし、配列「movieGenre」をKO計算プロパティにすることができます。このフィドルを見てください。

読者の便宜のために、フィドルのコードを以下に示します。

KOビューモデル

function MoviesViewModel() {
    var self = this;
    self.movies = ko.observableArray([
        {
            title: 'My First Movie',
            genre: 'comedy',
            year: '1984'
        },
        {
            title: 'My Next Movie',
            genre: 'horror',
            year: '1988'
        },
        {
            title: 'My Other Movie',
            genre: 'horror',
            year: '1986'
        }
    ]);

    self.movieGenre = ko.computed(function() {
        var genres = new Array();

        var moviesArray = self.movies();
        for (var i = 0; i < moviesArray.length; i++) {
            if (genres.indexOf(moviesArray[i].genre) < 0) {
                genres.push(moviesArray[i].genre);
            }
        }

        return genres;
    });  
};

HTML

<div data-bind="foreach: movieGenre()">
    <h3 data-bind="text: 'Genere : ' + $data"></h3>
    <table border="solid">
        <thead>
            <tr>
                <th>Title</th>
                <th>Genre</th>
                <th>Year</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: $parent.movies">
            <!-- ko if: $data.genre === $parent -->
            <tr>
                <td data-bind="text: $data.title"></td>
                <td data-bind="text: $data.genre"></td>
                <td data-bind="text: $data.year"></td>
            </tr>
            <!-- /ko -->
        </tbody>
    </table>
</div>

ご覧のとおり、「movieGenre」は計算されたプロパティになります。監視可能な配列「movies」が変更されるたびに、moveGenreが計算されてキャッシュされます。ただし、これは書き込み可能な計算プロパティとして宣言されていないため、これをビューにバインドすることはできません。したがって、その値はデータバインディングで使用されます。

レンダリングのアプローチは、計算された「movieGenre」をループし、映画の別のループをネストすることです。テーブルに行を追加する前に、対応するテーブルについて、ムービーオブジェクトが現在のmovieGenreで評価されます。ここでは、コンテナレスの制御フロー構文が使用されています。「if」バインディングを使用できますが、それ以外の場合は、各ムービーオブジェクトごとに空のテーブル行が残ります。

$ parentバインディングコンテキストは、ネストされたループ内の親コンテキストにアクセスするために使用されます。

お役に立てれば。

于 2013-03-25T19:11:39.110 に答える