Question

I’ve been doing a lot of research into frameworks like backbone and knockout, and am trying to figure out the best option when it comes to handling dense object hierarchies, and binding object parameters to the DOM.

I’m working with objects that have their own parameters, but that also contain objects. Those objects in turn have their own parameters and contain objects, etc. To a level of about 5-6 objects. For example:

var Program = {
    id: 123,
    name: "some name",
    cycle1 {
        cycleName: "another name",
        startDate: "1-1-2012",
        day1 {
            startDate: "1-1-2012",
            metaData {
                foo: "bar",
                foo2: "bar 2"
            }
        }
        day2 {
            startDate: "1-1-2012",
            metaData {
                foo: "bar",
                foo2: "bar 2"
            }
        }
    }
    cycle2 {
        cycleName: "another name",
        startDate: "1-1-2012",
        day1 {
            startDate: "1-1-2012",
            metaData {
                foo: "bar",
                foo2: "bar 2"
            }
        }
        day2 {
            startDate: "1-1-2012",
            metaData {
                foo: "bar",
                foo2: "bar 2"
            }
        }
    }
}

This is a VERY simplified example, but gives an idea. Here, there is a Program object that will contain an unknown number of Cycle objects, which will contain Day objects, which will contain MetaData objects. Again, the numbers of which are almost certain to be completely variable, and each item will need to be bound to a DOM element.

I know Backbone really isn’t set up for nesting… and while Knockout might not be either, I feel like I could probably grok it more quickly.

Answer 1

I can’t say for Backbone, but Knockout handles nested objects just fine.

You can for example set up a template which is used to iterate your main object, then set up an element inside that template where you use another template to iterate the sub-object, and so on.

Or you could just iterate the sub-object directly in your main template, or whatever suits your use-case best.