Question

有一个可观察的数组：

            this.list = ko.observableArray([
            new GoalItem(1, 'page', 'Getting started', 0, '', [
                new GoalItem(2, 'page', 'Getting started 1.1', 0, ''),
                new GoalItem(3, 'video', 'Video', 0, '', [
                    new GoalItem(4, 'data', 'Data', 0, ''),
                    new GoalItem(5, 'test', 'Test', 0, '', [
                        new GoalItem(6, 'page', 'Test prep', 0, '', [
                            new GoalItem(7, 'video', 'Test video', 0, ''),
                            new GoalItem(8, 'file', 'Test file', 0, '')
                        ])
                    ]),
                    new GoalItem(9, 'page', 'Sample page', 0, '')
                ])
            ]),
            new GoalItem(10, 'page', 'More data tracking', 0, '', [
                new GoalItem(11, 'data', 'Data 1', 0, ''),
                new GoalItem(12, 'data', 'Data 2', 0, '')
            ])
        ]);

让我们说当前有效的项目是

new GoalItem(4, 'data', 'Data', 0, '')

我怎么能“走路”

this.list

获取应该

的“下一个”项目

new GoalItem(5, 'test', 'Test', 0, '', [
                        new GoalItem(6, 'page', 'Test prep', 0, '', [
                            new GoalItem(7, 'video', 'Test video', 0, ''),
                            new GoalItem(8, 'file', 'Test file', 0, '')
                        ])
                    ]),

或获取应该

的“上一个”项目

new GoalItem(3, 'video', 'Video', 0, '', [
                    new GoalItem(4, 'data', 'Data', 0, ''),
                    new GoalItem(5, 'test', 'Test', 0, '', [
                        new GoalItem(6, 'page', 'Test prep', 0, '', [
                            new GoalItem(7, 'video', 'Test video', 0, ''),
                            new GoalItem(8, 'file', 'Test file', 0, '')
                        ])
                    ]),
                    new GoalItem(9, 'page', 'Sample page', 0, '')
                ])

理想情况下使用

等功能

this.list.next()

和

this.list.previous()

希望这是有道理的。

谢谢！

Answer 1

有几种方法可以解决这个问题。

我认为处理它的一种简单方法是创建一个计算的observable，它代表结构的扁平化版本。这样，随着各种数组的变化，它总是正确的。

以下是递归地将子项添加到计算的可观察

的方法示例

//to be called recursively
var addChildren = function(array, result) {
    array = ko.utils.unwrapObservable(array);
    if (array) {
        for (var i = 0, j = array.length; i < j; i++) {
            result.push(array[i]);
            addChildren(array[i].children, result);
        }        
    }
};

//a flattened versions of the items
this.flatItems = ko.computed(function() {
    var result = [];
    addChildren(self.items(), result);
    return result;
});

以下示例显示了flatItems下一个/上一个的移动：http://jsfiddle.net/rniemeyer/VHEYK/

您也可以即时执行此操作，只需要执行更多循环查找每个项目的位置或附加元数据，这样您现在就可以从项目中返回父项。

向前或向后走多维javascript数组

1 个答案: