javascript - 向前或向后行走多维javascript数组

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

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

我认为处理它的一个简单方法是创建一个计算可观察量来表示结构的扁平版本。这样，当您的各种数组发生变化时，它总是正确的。

这是一个将子项递归添加到计算可观察量的方法示例

//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/

您也可以即时执行此操作，只需执行更多循环来查找每个项目的位置或附加元数据，以便您现在如何从项目返回到父级。