javascript - 迭代对象的属性 Knockoutjs

Question

根据我在网上找到的信息，我认为目前不可能使用 foreach 数据绑定(bind)来迭代淘汰赛中可观察对象的属性。

如果有人可以帮助我解决我正在尝试做的事情，我将非常感激。

假设我有一个电影对象数组:

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);
}

我已经尝试了大约十几种其他解决方案，我开始怀疑是否是我缺乏淘汰赛知识(我对此仍然很陌生)，或者它只是不可能按照我想要的方式就这样吧。

Answer 1

您可以将数组“movies”设为 KO 可观察数组，将数组“movieGenre”设为 KO 计算属性。看看this fiddle .

为了方便读者，下面给出了 fiddle 中的代码；

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”已成为计算属性。每当可观察数组“电影”发生变化时，都会计算并缓存 moveGenre。但是，由于这没有声明为可写计算属性，因此您无法将其绑定(bind)到您的 View 。因此，它的值用于数据绑定(bind)。

渲染的方法只是循环计算出的“movieGenre”，并嵌套另一个电影循环。在向表中添加行之前，对于相应的表，将使用当前的 movieGenre 评估电影对象。这里，使用了无容器控制流语法。我们可以使用“if”绑定(bind)，但这将为每个电影对象留下一个空的表行，否则类型是这样的。

$parent 绑定(bind)上下文用于访问嵌套循环中的父上下文。

希望这有帮助。