Creating Child Views

The separation between parent and child (or page and widget) views is entirely conceptual. All views inherit from BaseView and have the same ability to instantiate one or more children.

Child views should be instantiated in the parent view's postRender method using either addChild or addChildren (which accept either a single child spec or an array of child specs, respectively).

In the general case, children are "new" DOM nodes that are appended to the parent view's element. If we declare a parentElement in our child spec (which is optional), the child's DOM element is appended to it:

postRender: function() {
    this.addChildren([
        {
            id: 'OutputPanel',
            viewClass: OutputPanel,
            parentElement: this.$el
        }
    ]);
}

but in other cases - particularly when building charts - there is an existing element on the page that we want to co-opt for our childView. In this case, we define the element in the options object within the child spec:

postRender: function() {
    this.addChildren([
        {
            id: 'Dashboard',
            viewClass: Dashboard,
            options: {
                el: this.dashboardElement
            }
        }
    ]);
}

This options object is passed as the argument when instantiating a new View, and so options.el becomes the child view's "this.el" as if we had done `var childView = new BaseView( options );

Any view can have any number of children, and each of those can have any number of children. Keel manages View life-cycles so that if a view at any level is destroyed, it destroys all of its children (which destroy their children and so on).