Question

having an observable array like so:

            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, '')
            ])
        ]);

and let’s say the currently active item is

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

how can/would i “walk”

this.list

to get either the “next” item which should be

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, '')
                        ])
                    ]),

or get the “previous” item which should be

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, '')
                ])

ideally with functions like

this.list.next()

and

this.list.previous()

hope this makes sense.

thanks!

Answer 1

There are several ways that you could approach this one.

I think that a simple way to handle it is to create a computed observable that represents a flattened version of your structure. This way it will always be correct as your various arrays change.

Here is a sample of an approach to recursively add child items to a computed 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;
});

Here is a sample that shows moving next/previous through the flatItems: http://jsfiddle.net/rniemeyer/VHEYK/

You could do this on-the-fly as well, just need to either do more looping to find each item’s location or attach meta-data so you now how to get back to the parent from an item.